6

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

  • I don't have loads of experience with gutters but when I used them, my developer told me that there would be four sizes (S M L XL) to represent different screen sizes/devices. Each size had a variable number of total columns (between 12 and 4). All I had to do was say, this picture will be 6 columns wide in XL, 4 in L, 3 in M, and 2 in S. He didn't want specific pixel sizes for anything (just ratios for proper scaling). But I don't know if this is standard practice. – Ashlee Palka Feb 1 '17 at 15:56
2

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 Lynda.com 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.

-1

I don't know how much of your problem is dependent on Sketch, does it output to html? I do know the basics of responsive web design though.

The Creative Style Sheet (CSS) is linked from your HTML web page. The style sheet contains Media Queries which check which screen size the user has and delivers styles for that size.

They look like this:

@media only screen and (min-width: 600px) { /* For tablets: / {Styles defining the columns and spacing and everything you want for tablet size} } @media only screen and (min-width: 768px) { / For desktop: */ {Styles defining the columns and spacing and everything you want for desktop size} }

There are several more sizes: phone, tablet horizontal and vertical, laptop and desktop, big screen etc. They are all defined by pixel dimensions. When a certain device opens a web page it gets those styles that work on their screen size.

That's the responsiveness!

Most basically you can design layouts for each screen size and put each in the media query for that screen size. They can be completely different styles, proportions, colors, layout etc.

Usually people use the same format laid out differently on different screen. For example where they have 12 columns on a desktop they'll have 3 columns on a tablet and 1 columns on a phone. The content in the remaining columns is shifted below the top row so you scroll down to see them.

Programming all the responsiveness is pretty complicated for a beginner but there are pre-defined media queries in web platforms like bootstrap, which is free.

If you have the bootstrap CSS linked up to your web page you can use their pre-defined code to set your columns on different screen sizes. They use a max 12 column scheme, so after you start a row you can start a column with class "col-md-12" which means there will be 12 columns on medium screens and it will auto shift them down on smaller screens. A column can have multiple classes if you want get specific you can classify one col-lg-12 col-md-3 hidden-sm which means 12 columns on a large screen, 6 columns on a medium screen and hide it on small screens.

The gutter, or spacing between columns can also be defined the same way, within a media query for large screens make a rule something like padding-right: 20px. and in the media query for small screens make the padding less.

I believe Bootstrap gives the same spacing between columns on large and small screen sizes. It doesn't look funny because 10 pixels is a lot smaller on a phone than on a desktop.

I hope this helps.

  • It has absolutely nothing to do with Sketch, it just happens to be the software I chose.Someone just decided to add the tag to my post, another classic case of bad editing. Anyway, thank you for your very complete answer, it did certainly help me out a lot. I'm still unsure how one would make two 6col blocks that are next to each other, there's a gutter in the middle that confuses me. To which block would that gutter belong? – Summer Feb 2 '17 at 8:50
  • 1
    There are many problems with this answer. Among them: This question has nothing to do with Sketch or HTML. CSS does not stand for Creative Style Sheets. Your media queries affect more devices than what you say they do. Media queries do not guarantee responsiveness. People often use more than 1 column on a phone and more than 3 columns for a tablet. Bootstrap is not a "web platform". Responsiveness is not guaranteed by using a grid. Whether or not 10 pixels look smaller on a phone or not is a setting, not guaranteed. – Zach Saucier Feb 2 '17 at 12:46
  • This answer also fails to answer the actual question, that of how to use a grid from a design perspective and really should be deleted because none of this information is really useful for the OP – Zach Saucier Feb 2 '17 at 12:47
  • The poster seemed to benefit from my answer. Everything I wrote is true, I explained that the column settings were examples. My bad, " cascading style sheets". Maybe you can explain better? – Webster Feb 2 '17 at 14:43
  • To make two six column blocks you open a div with class row and then place 2 divs in it with class col-md-6. To give them a gutter you can apply right margin to the first or left/right margin to both of them. – Webster Feb 2 '17 at 14:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.