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 trialS Alexander
18,962 PointsWhy 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
Courses Plus Student 44,108 PointsWebsites 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
9,767 PointsIt 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
18,962 PointsThanks, Matthew.
S Alexander
18,962 PointsThanks, Dino. That makes sense: it's a multiple of 3 and 4.