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 CSS Layout Techniques Grid Layout Creating Fluid Grid Columns

Kevin Faust
Kevin Faust
15,353 Points
Posted by Kevin Faust
Kevin Faust
15,353 Points

i dont get how Guil got the values..

How did Guil come up with the numbers for the columns and gutters width? Are these the standard widths? Where did the number 1000 come from? If these are not standard widths, how do you determine what widths you should use?

3 Answers

Emma Davis
Emma Davis
4,760 Points
Emma Davis
Emma Davis
4,760 Points

I have just taken a look at the video and right at the beginning he states:

"We want 12 columns at 65 pixels each. And we'll need 11, 20 pixel wide gutters worth margins. So that gives us an overall width of 1000 pixels."

So basically, the decision is yours as to how wide you want your columns and gutters to be. But, I will say, that working out the column and gutter widths along with how many columns you want first is not the right way to to do as you could end up with an overall width of 1000's of pixels. So, really this should have been explained the other way around:

"We want an overall width of 1000 pixels split into 12 columns. This will mean we need 11 gutters which we want to be 20 pixels wide. So this means each column will be 65 pixels each"

Obviously some basic addition, subtraction and division is required to get to these figures.

11 gutters at 20px wide = 220px 1000px minus 220px = 780px (what we have left to work with after gutters) 780px divided by 12 columns = 65px

Hope this helps :)

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Hi Kevin, could I ask how did you improve? since it's over 1 year now.

Unsubscribed User
Unsubscribed User
8,841 Points
Unsubscribed User
Unsubscribed User
8,841 Points

Mathematical Calculation for the example of grid layout:

We are creating a "12 no's" single column of 65px wide and "11 no's" 20px gutter (space b/w columns).

Total pixel = (12*65) + (11*20) = 1000px

Conversion of the pixel into percentages:

  • For a 1 column layout , we do not need a gutter: (65px / 1000px) * 100 = 6.5%
  • For a 2 column layout, we need a single gutter inbetween them, (65px + 20px + 65px) * 100 = 15%
  • For a 3 column layout, we need a single gutter inbetween them, (65px + 20px + 65px + 20px + 65px) * 100 = 23.5%