CSS RWD Grid View
A grid-view is when a page is divided into rows and columns. Many webpages are created this way. Most responsive grid-views have 6-12 columns.
Building a Grid View
First we must set all elements in our webpage to have a border-box value for its box-sizing property. Again, this makes sure that the border and padding of an element is included in the overall width and height of an element.
Then, we just need to create a grid container with the necessary grid items inside it. Using media queries, we can make our grid layout responsive. The example from our responsive web design intro chapter utilizes these principles:
Example 1:
Resize the bottom right of the iframe to showcase the changes in the responsive grid webpage.
