What is a grid?

Grids are lines. Horizontal lines, vertical lines. Four, eight, twenty-four. Anything goes as long as it stays within the lines.

Grids are frameworks which are surprisingly easy to break. What stops you from crossing a line? Nothing and no one. But caution is advised — think carefully before breaking the grid.

Grids are your friends. Like a good friend, they aim to help you. It may be hard to believe; to many of us a grid's lines feel like bars meant to imprison us. What if we look at it differently? They offer us a roadmap.

Grids are our route towards order and structure. People love order. Break outside of the grid, and you create chaos, leaving people unsure what to do. That's a deadly sin for web designers — don't make your users think.

Well, if it's so important to adhere to a grid in web design, how does it work?

How to create a grid

To make your life easier: use grids. To make using grids easier: use grid systems. There are many types of grid systems that give you predefined layouts, ratios and which are suitable for responsive web design.

Heck, I even made a template that uses the ... grid system. Check it out!

Make the choice for a grid before you start designing. This saves you a lot of work later on, as you won't have to change anything to conform to your grid. The parameters of a grid depends on complexity of the design you have in mind. It can range from a two-column mobile layout, to a magazine layout using up to 24 columns. Think carefully about the grid you want to use; maybe start out by sketching some of your ideas on paper and see how many columns your grid needs.

Then, when your grid is done, it's a good rule of thumb to never, ever break with your grid for parts of your UI design. Only when breaking the grid improves the graphic design, you can maybe make an exception — if you really have to.

In my free Figma Starter Design System there are 3 grids included: Desktop, Tablet and Mobile.