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

S Alexander
S Alexander
18,962 Points
Posted by S Alexander
S Alexander
18,962 Points

Why 12 columns?

Hi. Why did Guil (and why do grids like Foundation and Bootstrap) choose a 12-column grid as the default? What advantages does it have over others? When would it be more appropriate to choose a 10- or 8-column layout? Cheers, Alex

3 Answers

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

Websites often present their content in multiple columns, as you know. It's not unusual to find yourself wanting to have those columns evenly distributed and of same size. A 12-column grid will allow you to do that regardless of whether you want 2 (by spanning 6), 3 (by spanning 4) or 4 (by spanning 3) content columns. You can even do 5 columns by skipping one and then spanning 2, 5 times. Being a multiple of 3 and 4, it's fairly flexible.

That's the explanation I came upon years ago, I'd link the source article, but I never bookmarked it.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

It all depends on your design. A column is obviously a proportion of the viewport width. 12 is a well distributed division as you have a good range of widths you can assign to content. You can have anything from 1 column to 100 columns if you want. All depends how detailed and varied the elements you're building are.

To be honest though, I don't use columns and nor do a huge number of people. They're not compulsory. Columns immediately restrict what you're doing.

I tend to have a number of containers which act as columns and are the reference point for assigning widths to elements within that section of a page.

S Alexander
S Alexander
18,962 Points
S Alexander
S Alexander
18,962 Points

Thanks, Dino. That makes sense: it's a multiple of 3 and 4.