Use 10px spacing to the left and right of each column for a total gutter spacing of 20px.The 960 grid follows the following structure: There are two variations: 12 and 16 columns. The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions based on a width of 960 pixels. Consider large margins and healthy spacing between sections of content to allow your user to breathe and pause as they are scrolling through your website. Don’t feel the need to fill every corner on a landing page design. The more you use a grid, the more you’ll realize how it’s a guide and it will actually help you design better faster.īalancing whitespace or negative space is important in web design. After you’ve created your grid, it’s ok to break it! But at least you’re doing it intentionally and there are reasons for your design decisions.

New designers might feel confined by the idea of using a grid but you shouldn’t. ‍ Don’t be afraid to break the grid when needed Before you start designing, think about the grid first, rather than leaving it to the end and trying to make your design fit into a grid. It’s one simple step, once you’ve created it, you won’t have to think about it again for all subsequent landing pages. Now that you know what a grid is, different types of grids, and create your own, let’s get into some tips for how best to use them in web design.Īfter you have done your research, maybe even explored some low-fidelity wireframing on paper, create a grid for your landing page. You can adjust how many columns, the gutter width, the column width, and even choose if you want this to be your default grid for future web design projects. From there you can customize your grid however you like.

Types of grids in graphic design