Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,107 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.