Proper use of Grid.CSS

Hi Josh,

In general, the alpha class would be used to remove the left margin on the left-most(first) item in a row, and the omega class would be used to remove the right margin on the right-most(last) item in a row.

With this particular grid I don't think it's necessary to use the alpha class because the grid items don't have a left margin applied but the grid items do have a 20px right margin applied in order to achieve a 20px gutter between grid items. It becomes necessary then to use the omega class on the last item in each row to remove that 20px margin to make it fit.

Using your example of a grid 10 item followed by a grid 2 item, the grid 2 item is the last item in that row and so needs the omega class.

If you add up the widths and margins for these 2 items you get: 830px + 20px + 150px + 20px = 1020px

There's not enough room for the grid 2 item in a 1000px wide container unless you remove that 20px right margin. The browser would end up pushing the grid 2 item down to the next row in order to make things fit.

It was not necessary to use it on the grid 12 item because new margins were applied to the copyright div with the following rule:

#copyright {
    border-top: 8px solid #2a0400;
    margin: 15px 0;
    padding: 10px 0;
    text-align: center;
}

That margin declaration zeroes out both the left and right margin and so it's unnecessary to use the omega class on it.

Great thanks for the feedback everyone. I think that will with what I am working on. I will also ask it on the earlier lesson that more specifically addresses this.