Grids with no gutters(

over 9 years ago from Christopher Cliff,

  • Jeff MillerJeff Miller, over 9 years ago (edited over 9 years ago )

    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 to automate it. A grid will always be necessary, might as well make it easy on yourself.

    0 points
    • Nate NavascaNate Navasca, over 9 years ago

      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.

      1 point