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 Understanding Grids

Lorraine Wheat
Lorraine Wheat
6,083 Points
Posted by Lorraine Wheat
Lorraine Wheat
6,083 Points

How did Hernandez determine that each column needed to be 65px wide?

How did Hernandez determine that each column needed to be 65px wide?

Josh Adams
Josh Adams
7,146 Points

Which tutorial are you referring to?

(the width of a column is usually the designers preferences unless it has a specific requirement)

3 Answers

Zach Elkins
Zach Elkins
9,602 Points
Zach Elkins
Zach Elkins
9,602 Points

Typically when styling columns you will have to find the proper value for your purpose. Hernandez likely knew what size columns he wanted to use prior to teaching the video to save time figuring out what would work best.

When you are sizing columns with CSS, sometimes you will have to try a couple sizes if you're not sure what size you're looking for.

Also, there are a lot of really good browser extensions that will allow you to use a ruler in your browser and can help you figure out what size you're looking for by using the pixel ruler in your browser once you install it. I'd recommend finding one for your particular browser and working with that to make finding the proper sizes more easily when starting out.

Víctor Rico
Víctor Rico
17,808 Points
Víctor Rico
Víctor Rico
17,808 Points

I now this question was answered a month ago, but I'm going to tell how you can calculate those numbers.

First, we decide the desired space between columns, in this case 20, then the number of columns (12) and last the width of the container (1000).

  • Container: 1000.

  • Gutters: 20.

  • Columns: 12.

With these values we can start calculating.

  • Multiply 20 by 11 (12 – 1 as we don't want the last column to have any space):

    • 20 * 11 = 220

  • Subtract 220 from 1000:

    • 1000 – 220 = 780

  • Divide the result 780 by 12:

    • 780 / 12 = 65

I hope this helps you.

Mark Cuda
Mark Cuda
6,428 Points
Mark Cuda
Mark Cuda
6,428 Points

Just wanted to pop in and say (six months belated, I might add) this was a very simple explanation of gutters and columns. I'm going to save this for explaining to others later, (As well as my own reference.) Thank you.

Kyle Papili
Kyle Papili
9,112 Points

How did you get 1000 as the container width. What if someone resizes their web browser?

jeanpierrejoubert
jeanpierrejoubert
3,323 Points

This answer by Victor is the best one as to the, 'how'. The, 'why', is simply because a standard 4:3 computer screen used to be 1024 x 768 pixels. As Victor mentioned, if you add all this up you get to 1000 pixels wide: <br>

(12 columns x 65px each = 780px) + (11 gutters x 20px each = 220px) = 1000px total. <br>

If you're using a 1024 x 768 screen as a reference point this gives you a bit of extra on either side, (24px left-over total) which allows it to fit nicely on the screen.

(BTW: He explains all of this in the next video, so don't get too worried about it.)

Lorraine Wheat
Lorraine Wheat
6,083 Points
Lorraine Wheat
Lorraine Wheat
6,083 Points

Thank you. I do wish that was shown more.