What does CSS Responsive mean?
What is Grid Layout?
Please help me anyone understanding that.
The layout adjusts to screen sizes (such as when you narrow your browser window, or when you view the page on a hand-held device). Here’s a seminal article on the subject: http://alistapart.com/article/responsive-web-design
As ralph mentioned ‘responsive’ is a term to describe a layout that changes, usually drastically at specific screen sizes. This is not to be confused with ‘fluid’ whcih merely adjusts. ‘responsive’ design usually employ CSS3 media queries.
‘grids’ are just that ‘grids’. similar to the concept in print design you design around an imaginary set of coulms.
for example: you could have a 8 col. grid. each col being 120px wide for a total of 960px
When you lay your elements out in a row you could have the following:
row 1 head: (2col) ( 4 col) (2 col )
row 2 content : (4col) ( 4 col)
row 3 footer : (2col) ( 2 col) ( 2 col) ( 2 col)
This is not only great aesthetically, but can serve for responsive layouts since you can do a little math and rearrange the layout w/o changing the size of the components . lets say only had a 480px screen you could rearrange the above this way (going from 8 col to 4 col grid) :
row 1 head: (2col)(2 col )
row 2 head: ( 4 col)
row 3 content : (4col)
row 4 content : (4col)
row 5 footer : (2col) ( 2 col)
row 6 footer : (2col) ( 2 col)
hope that helps