Grid Syntax

Typically grid systems come with predefined classes for you to incorporate into your markup in order to structure your website's layout.

For example, I used the One% responsive grid layout when making my website. So I downloaded and added their grid.css to the cascade of my website.

In One%, and many other grids, they use a system of columns to determine how many elements can sit in a row, hence "grid".

So my grid layout is comprised of 12 columns. So, for example, I want half of the row to display an image, and the other half to display text. Therefore:

<div class="col6">My image would go here. This would go on the left half of the page.</div> <div class="col6 last">My text would go here. This would be on the right half of the page.</div>

You'll notice I added the class "last" to my second div element. That means it will be the LAST element in that row, therefore it removes the margins so everything fits nicely.

In the building a basic website module here on treehouse, they used a grid, except instead of "last" they used "omega".

It's a good idea to go over the CSS for your grid to learn the styles. It's simple math, but not all styles use the same classes, for example instead of "col1" or "col2", yours might be "grid_1" or "grid_6".