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! While you're at it, check out some resources Treehouse students have shared here.

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

Posted by Gary Mann
Gary Mann
8,639 Points

grid.css (let's take a closer look)!

Okay, on one hand, everything that goes into how a simple grid works is available in the css Deep Dive. If you've really grasped everything there, the grid.css makes sense.

On the other hand, a huge number of posts on the Treehouse forum bring up confusion about how a grid works. I hope the Treehouse folks have taken notice, because a couple Treehouse quality videos could seriously shorten the learning curve for a huge audience.

Now, that said, let's take a look. (I plan to make quite a few posts this morning. So don't be too eager to post replies. Thanks.)

Gary Mann
Gary Mann
8,639 Points

Here's the whole grid.css code, for future reference:

/*
 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}
Gary Mann
Gary Mann
8,639 Points

Okay, let's look at this more closely. First, let's look at the container.

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

This means that everything that we want contained in the grid.css file should be wrapped in our html by a div with the class of "container". 

<body>
    <div class = "container">
    </div>
</body>
Gary Mann
Gary Mann
8,639 Points

Next, let's look at what each .grid_? description does.

.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; }

Okay. Now we have a bunch of classes that we can plug into our html. All we've defined about a class is how wide it is.

Since our container is 1000px , this will help us manipulate where something will go.

Gary Mann
Gary Mann
8,639 Points

Next, we have:

.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;

So every .grid_? class is defined to have a margin-right of 20px. That's our 20px gutter.

And all of our .grid_? classes are floated left. Once we display these elements block, we should have a grasp of how our elements (given these .grid_? classes) are getting their positioning.

Gary Mann
Gary Mann
8,639 Points

So we have, in this case, a 1000px wide .container .

If we want something to start on the left and take up 8 columns, we give it

class= " grid_8 "

And it floats left, correct? And then if we want to put something to the right of that, we should be able to give it

class= " grid_4 "

Right? That's 660px + 20px right margin + 320px + 20px right margin.

Damn it! That's 1020px in a 1000px .container div.

But, from our grid.css:

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

creates two classes that we can apply to div's or whatever in our html.

.alpha can be applied to anything we expect to display flush left. And .omega can be applied to anything we expect to display flush right.

So, for example, if we applied "grid_4 omega" to the div in the example above, then the .grid_8 and .grid_4 would span 1000px. Perfect.

3 Answers

Art Skupienski
Art Skupienski
7,080 Points
Art Skupienski
Art Skupienski
7,080 Points

Hi Gary,

Very nice explanation! And I am sure you will have many visits here :-)

I addition I would say that Nick has done great job and explained CSS grids here. Check this out if you need consolidate your knowledge.

http://teamtreehouse.com/library/build-a-simple-website/creating-a-website-structure/adding-grid-css

http://teamtreehouse.com/library/build-a-simple-website/creating-a-website-structure/working-with-grids

Happy coding! Art

Art Skupienski
Art Skupienski
7,080 Points
Art Skupienski
Art Skupienski
7,080 Points

This is a great example and explanation of all clearfix elements used in code above. Very useful and very needed in almost any CSS design until CSS3 flex boxes will become as a standard ;)

http://nicolasgallagher.com/micro-clearfix-hack/

Gary Mann
Gary Mann
8,639 Points
Gary Mann
Gary Mann
8,639 Points

Finally, because we floated every .grid_? class left, and 'float' takes elements out of the regular flow, we have the potential for things to collapse.

From our grid.css file:

.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}

Frankly, I'm confused by the clearfix here, since I've been up all night :) . I'll sort it out tomorrow, or let you all comment to sort it out in the meantime. Thanks.