10

Grid Settings - Sketch 3

over 5 years ago from

I find the grid settings tool very frustrating, and please let me explain why.

Take an example of designing a website, based on the Bootstrap grid for large devices. Check the video I created.

http://quick.as/rd9jcjw7

As you can see, Sketch estimates the gutter width based upon my column width, and vice versa. I want the ability to override what Sketch sees fit, as the correct gutter width etc.

Is there anyone who knows of a way to overcome this?

9 comments

  • Bruce Vang, over 5 years ago (edited over 5 years ago )

    As other's have said Sketch's math is correct. This post made me worried so I made this screenshot of HTML (top) vs Sketch

    Imgur

    2 points
  • Diego LafuenteDiego Lafuente, over 5 years ago (edited over 5 years ago )

    The problem is, the new Bootstrap computes the padding of each column as the gutter. That's why you have Columns widths of 95 instead of less pixels.

    Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.

    Once you get it, you can make a grid of such properties with easy.

    This is how the Bootstrap 3 grid looks like:

    https://www.dropbox.com/s/kdrgpsqjx3wkhdx/Captura%20de%20pantalla%202014-04-25%2009.56.00.png

    This is how the old Bootstrap 2.3.2 worked, with real space instead of paddings:

    https://www.dropbox.com/s/4jekoons2cqkzzd/Captura%20de%20pantalla%202014-04-25%2009.57.08.png

    2 points
  • Chris LüdersChris Lüders, over 5 years ago

    i dont like the grid settings in sketch as well. Would be nice, if it would work like the guideguide plugin (photoshop).

    1 point
  • Adam T.Adam T., over 5 years ago

    Doesn't bootstrap use box sizing and include padding in column width?

    1 point
  • Ian Soper, over 5 years ago (edited over 5 years ago )

    So, technically bootstraps columns are 8.33333333% with a 15px padding on each side. So, the width of the columns are actually 67.5px with 30px gutters.

    See my grid settting example: http://cl.ly/VBqO

    0 points
  • Guillaume BroderGuillaume Broder, over 5 years ago

    Hmm, Isn't the gutter width included in the column width on the bootstrap website ? Instead of 95px shouldn't it be 65px if you want it to work ? (Just guessing here…)

    0 points
  • Sebastián RibasSebastián Ribas, over 5 years ago

    I have the same problem! I'm trying to recreate a 1280px, 12 columns (72px each), 32px margin. Any help is appreciated.

    Thanks!

    0 points
    • Samuel Ryan, over 5 years ago

      It's really amazing how the guys over at Bohemian Coding overlooked this one. I requested the fix, for them to carry out in an earlier version of Sketch, but they obviously didn't go ahead with it. I hope it's on their agenda.

      It's good to know I'm not the only one with this issue.

      0 points
      • Koy CarrawayKoy Carraway, over 5 years ago

        I might be confused exactly what your asking, but isn't 12 columns at 95px each + 11 gutters at 30px = 1470px container width? not 1170px. I thought bootstrap had its gutter adding to column padding. The math on Sketch part is correct.

        6 points