10

Show DN: Grid.Guide - Generating Whole Pixel Column and Gutter Widths

almost 8 years ago from , UI+UX Designer at Moltin

I find it really annoying to have to calculate grid widths — especially within nested spaces — within my designs without ending up with crazy numbers of vertical guides or guide shapes.

After not finding a tool that worked exactly how I wanted it too, we at Big Bite created Grid.Guide to solve the problem for us.

It uses a max width and column count to calculate possible whole pixel column and gutter width combinations. It generates PNGs so you can drag or copy them straight into your designs.

It’s free to use so please have a go and let us know if you like it. If there’s a feature you’d like to see to help it adapt into your style, we’d love to know so please comment :)

Check it out at Grid.Guide.

10 comments

  • Tyler SomersTyler Somers, almost 8 years ago (edited almost 8 years ago )

    This is incredibly helpful, thank you. However, can there also be an option for an outer half gutter? Typically, I build the gutter by creating even spacing on each side of the column, thus creating a half-sized gutter on the left and right of the grid. https://www.dropbox.com/s/095xw2vkl0ijbti/grid.jpg?dl=0

    1 point
    • Ollie BarkerOllie Barker, almost 8 years ago

      Ah ok that's interesting, thanks for the response. Perhaps have an input for outer gutter ratio, or a dropdown where you can select options like 0, 0.5, 1, 1.5 or 2. Cheers i'll chat to the guys about it :)

      0 points
    • Ollie BarkerOllie Barker, over 5 years ago

      We built this in :) Just found this DN post a few years later!

      0 points
  • Eugene Zaycev, almost 8 years ago

    Try Gridulator.com

    1 point
    • Ollie BarkerOllie Barker, almost 8 years ago (edited almost 8 years ago )

      There are a few others out there but don't do exactly what I want. Gridulator doesn't include an option for outer gutters which I wanted and I have to generate all the PNGs manually rather than a much easier drag and drop.

      0 points
  • Elliot DahlElliot Dahl, almost 8 years ago

    Hey this is awesome. I've been wanting to build something like this for myself. My only critique, I'd like to be able to select a column number. 12 columns is pretty standard but I do sometimes require a 10 column setup.

    0 points
  • Raffaello SanzioRaffaello Sanzio, almost 8 years ago

    This looks great, man. Much better than other Grid tools I've tried.

    0 points