Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Build a Simple Website Styling Content Finishing the CSS

Proper use of Grid.CSS

Greetings, I am working on building a photo portfolio based off the concepts from this video series. I'm not really sure how to determine how to use the omega class in conjunction with the different width classes. Based off the instructions from Nick it seems like he might use .grid_10 in one div and then .grid_2 omega in a subsequent div for a total of 12. This make sense to me but at the end of the code in the footer area div id #copyright he has the class .grid_12 without omega on it. How does he go about determining how to add the divs up and how to use omega or alpha class?

Herb Bresnan
Herb Bresnan
10,658 Points

Is this the Q & A on Building a simple website? If so, you may want to add something in the title of your question directed toward PRO subscribers. "Pro Users - Proper Use of Grid.css". That may attract the people who can help you. Or you may have to email the instructor. Sorry that's all the help I can give.

2 Answers

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.

For reference, this was the grid I was basing my answer on.

grid.css

/*
 Width: 1000px
 # Columns : 12 
 Column width: 65px
 Gutter : 20px 

 */
.grid_1 { width: 65px; }
.grid_2 { width: 150px; }
.grid_3 { width: 235px; }
.grid_4 { width: 320px; }
.grid_5 { width: 405px; }
.grid_6 { width: 490px; }
.grid_7 { width: 575px; }
.grid_8 { width: 660px; }
.grid_9 { width: 745px; }
.grid_10 { width: 830px; }
.grid_11 { width: 915px; }
.grid_12 { width: 1000px; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin: 0 20px 10px 0;
    float: left;
    display: block;
}

.alpha{margin-left:0px;}
.omega{margin-right:0px;}

.container{
    width: 1000px; 
    margin: auto;
}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

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.