The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns; columns create the actual structure. For layouts to work properly, always put your page content inside a row and a column.
What you need to know is that columns don't have a fixed width. They can vary based on the resolution of the screen, or the size of the window (try scaling down this window to see what we mean).
When you are laying out the content for your page, think first about how those big blocks of information will come together, then you can decide what configuration of columns best suits that particular page. By using pre-defined div classes (ex. for a four column div, you would use <div class="four columns">) you're able to arrange a proportionately appropriate layout that best suits your content.
Below is a visible example of the grid. Each column block is sized based on how many of the twelve columns it takes up, and where you see thicker borders it's because two columns are running against each other.
(It's important to note that when the right-side navigation menu is active your content will flow around it.)
What problem does this solve?
Utilizing the twelve-column grid layout on your page provides you with a logical way to arrange information, whether it be tables, text or pictures. It doesn’t mean that your page needs to be boring or boxy. Just like it has been said with responsive web design, the responsibility is with you to create a design that is functional and displays information easily for the user—and this twelve-column grid system is something that will enable you to do that, rather than restrict you.
HTML for a 4-4-4 column grid:
HTML for a 7-5 column grid:
Note: this is our local copy of Zurb's documentation. Our installation and styles differ in some ways from the stock foundation. To account for these differences, we have duplicated their documentation in our environment. This local documentation is authoritative for HSC sites.