Grids with no gutters (ilyabirman.net)
over 9 years ago from Christopher Cliff, christophercliff.com
over 9 years ago from Christopher Cliff, christophercliff.com
Interesting. The lack of symmetry gives me pause, though. It seems less organized and more "shoot from the hip" than a completely thought-out, guttered grid system.
Maybe I'm placing too much faith in rules and systems. With tools like Gridset readily available, though, I don't think calculating gutters is an undue burden.
He's still using gutters, just in a different way. Makes no real difference but the system is less flexible than traditional grid systems.
Another of working with Grids with no gutters is to have enough grids that can substitute as gutters if need be (i.e. a 24 or 32 or 48 column grid). It sounds a bit excessive but I've found it useful in some settings on print work (not sure how this would work well on the web, could be a case of excess markup).
Inuit uses a similar technique to this. Offset the container with a negative margin-left and give an equal padding-left value to the grid items allowing more accurate measurement as well as sensible class names like .one-half
instead of .span-6
.
I'll admit I do not fully understand his reasoning for switching from a gutter system to a right padding system. If your content requires a right padding, what then? And if someone is not using gutters because it takes five minutes to calculate the math (or 1 minute if you use an online-based grid calculator), that seems like a bad reason.
My two cents.
This is pretty silly, he's essentially just replacing the gutter with a margin, which means it's not centered and harder to use. Completely impractical.
The author asks:
"The layout here is 760 pixels wide with six 100-pixel columns, five 20-pixel gutters and two 30-pixel margins.
Now, quick: what will the column width be if we increase gutters to 25 pixels?"
The answer is that it's not possible to have 25px gutters because it would result in columns being 95.83333333px wide (assuming margin widths don't change). Since, 25px is not possible, an alternate solution is to go to 26px gutters because then you get a nice clean 95px column width.
The math to figure that out is not that complicated. In fact, I use it so often I stuck it in a spreadsheet.
I'm concerned that the author is throwing out the whole idea of gutters just because math is "overcomplicated" and "highly impractical".
I agree that column math is not fun. Make your own spreadsheet or use a tool like www.guideguide.me to automate it. A grid will always be necessary, might as well make it easy on yourself.
Exactly what I was thinking. Itβs especially a moot point with Sketch, where all of those values are calculated automatically after changing any one value.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now