I’m the OP and took someone’s advice to get “Responsive web design” by Ethan Marcotte which I’ve started reading. The grid system I’m still having problems understanding, but I think I get the idea of using percentage values (%EM) in CSS for flexible page widths, image and font sizes related to the browser width as opposed to fixed pixel values and CSS media query to define which elements of the web page go where and what will be shown depending on the type of media (desktop, iPhone, Android, iPad etc.) in order to make a page adapt for any device.
Correct me please if I’ve misunderstood the concept.
Getting back to the confusion surrounding grid layouts: I feel that what I really need is a visual understanding of how it works before I can dive into the CSS/HTML coding. Skeleton for instance has a visual demo here, which shows numerous boxes (labelled one-eleven-two-ten-three-nine…) which resize/rearrange according to the browser width; no doubt demonstrating its responsive design. But I don’t understand why there are so many boxes, what they all do and where the actual contents (text/images) go. I’m guessing they’re all separate DIVs…
It gets even more confusing when people introduce Photoshop in the process with grid template images. What on earth has Photoshop to do with designing web pages (other than editing photos, creating logos, buttons and other graphic elements), and how do those vertical lines/columns relate to the web page content and CSS code? I know that it has something to do with arranging the content side by side in a neat manner like the way a newspaper page is set up, but not much more than that.
With all of that, what I’m trying say is that I could need a quick and practical explanation of what a web grid is.