The right way to do a 12 column grid?

[onebitrocket]

Hey all,

I’ve started putting together a 12 column grid system and I’m trying to understand if the way I’m doing it is correct, wrong or just a different approach to setting my column grid.

I’ve been asked to look at the methods used in bootstrap and foundation as a comparison.

Looking at their 12 column methods, one of the things that really bothers me is that you can nest 12 columns inside a containing div that is 6 columns wide – shouldn’t the number of available nested columns be no more than the value of it’s parent column

SO, if a container div is 6 columns wide, it should be contain no more than six 1 column elements. In other words the parent column value should should not be divisible by more than itself.

This is the method I have been using, so no matter where I declare<div class="col1"><div> the width will be a constant regardless of how far it is nested.

I’ve put together a a codepen demo of where I am up to so far, I haven’t declared anything past 7 columns wide so far.

12 column grid demo

I think my approach is just different, but I want to get some feedback on if there are pitfalls or advantages to my method, compared to bootstrap or foundation.

Thanks

[Paulie_D]

Looking at their 12 column methods, one of the things that really bothers me is that you can nest 12 columns inside a containing div that is 6 columns wide – shouldn’t the number of available nested columns be no more than the value of it’s parent column

Nope…the colum ‘number`, say span-6 in a 12 column layout refers to the percentage.

So a 6 column div is 6/12 of the page wide = 50%

So in a 12 column div inside a 6 column div each column would be 50%/12 wide.

*excepting margins and padding which is a whole other issue.

TBH…I’m not sure there is any reason to re-invent the wheel here (other than to learn), I think Bootstrap lets you download customised versions of it’s grid in which you can define your own column numbers.

Aslo Chris Coyier has this: https://css-tricks.com/dont-overthink-it-grids/ which might prove instructive.

[Author]

Posts