The basics of webdesign for responsive grids

I’ve never designed using a grid layout. I want to do that now so my developer can easily change the current layout, that is already made using a row/column grid.

I opened my software, made a grid layout appear and wanted to get going, only to realise I have no idea what the basic ‘rules’ are. I get the scaling down to different screens, being able to change the amount of columns per screen.

But what about the gutters. How do I use the gutters? I imagine an x amount of pixels between every object is not always wished for, what do I do if I need multiple columns next to each other? Do you go column to gutter, or gutter to column? And what if I want just one row with 3 column wide block + the gutter?

I made a quick illustration, I am hoping you can tell me which of these blocks are right or wrong.

enter image description here


So you’ve never designed using a grid layout but you want to start doing so. Great! A grid is a designers best friend an a structure that serves as a framework on which you can always lean on to.

As you said, you already get the scaling and the idea behind grids. But a grid layout is much more and I would say it’s of great worth to learn.

A few years ago I didn’t know how to benefit a grid layout on my designs (print or web) but then I stumbled on teachings of a great graphic designer Mr. John McWade. He’s a guy behind Before&After magazine. With his online courses, McWade has taught me a great deal about layout and the benefits of using a grid and really helped me to become a better designer. Based on your question I think you could benefit from learning from him as well. You can check out that course on Lynda here. You have to log in and is a paid service, but they offer a free 30 days trial if you need one.

Then comes your specific question about gutters based on your illustration. You should check out Bootstrap’s documentation about their grid system. In their practice they use horizontal padding to create the gutters between individual columns, so you don’t actually even see the gutters in there and therefore they are in a way taken care of. Also, if you like to make more breathing room between some of your columns you can easily do so with off-set class. You can found many excellent resources for learning more about 12 column grid system for Bootstrap or other frameworks alike from internet.

You should focus on understanding how to use a grid layout and the benefits it offers. After all it is just a grid. If you like or need you can go of it and plays your layout reach to a gutter if you feel like it. Of course this isn’t necessarily wise thing to do if you want to maintain a neat and clean layout, but why not there would be cases your design profits it.

Also Threehouse teaches a great online course about how to get up and running with Bootstrap and they also offer a free trial
if you want to just tip your toe in first. Here’s a link to Guil Hernandezs’ great course.

Source : Link , Question Author : Summer , Answer Author : Zach Saucier

Leave a Comment