Website Grid Setup: A Complete Guide for Designers

Credit: Post by @sajon.co

If your website layouts feel slightly off, like things are almost aligned but not quite, the problem is almost always your grid. A good grid system is the invisible structure that makes everything on a page feel intentional, balanced, and connected.

Let's break down how to set up a website grid that actually works.

Start With the 12-Column Grid

The 12-column grid is the industry standard for web design, and for good reason. It's divisible by 2, 3, 4, and 6, which means you can create layouts with 2, 3, 4, or 6 equal sections without any math headaches.

In Figma or your design tool of choice, set up a 12-column grid with a max-width container (usually 1200px or 1440px), gutters of 16-24px between columns, and margins of 16-32px on the sides. This gives you a flexible foundation that works across most screen sizes.

Understand Your Breakpoints

A grid isn't one-size-fits-all. You need different grid configurations for different screen sizes. The common breakpoints:

• Desktop (1200px+): 12 columns, 24px gutters, 32px margins
• Tablet (768-1024px): 8 columns, 16px gutters, 24px margins
• Mobile (320-767px): 4 columns, 16px gutters, 16px margins

The column count drops as the screen gets smaller, but the gutter and margin sizes stay relatively consistent. This keeps spacing feeling familiar across devices.

Use a Spacing System, Not Random Values

Here's where most designers go wrong: they pick spacing values by feel. A section gets 40px of padding here, 32px there, 56px on the next one. It looks fine individually but feels inconsistent across the page.

Instead, use a spacing scale based on an 8px baseline: 8, 16, 24, 32, 48, 64, 96, 128. Every padding, margin, and gap should come from this scale. It creates rhythm and consistency without you having to think about it.

Container vs Full-Width Sections

Not every section needs to respect the 12-column grid. Some sections, like hero backgrounds, feature highlights, or full-bleed images, should break out of the container and span full width. The key is to alternate between contained content (respecting the grid) and full-width moments (breaking out) to create visual rhythm.

The content inside these full-width sections should still align to the grid, even if the background doesn't. This creates structure within freedom.

Test Your Grid With Real Content

A grid that looks perfect with placeholder text and gray boxes will often break with real content. Test your grid with the longest headings, the shortest paragraphs, and the oddest image aspect ratios you expect to encounter.

Look for: Does the text wrap awkwardly? Do images get too large at certain breakpoints? Does the content feel too cramped or too sparse at any width? These are grid problems, not content problems, fix the grid.

The Takeaway

A good grid system is the foundation that makes your design feel professional. It's not the most exciting part of the process, but it's the part that makes everything else easier. Once your grid is set, decisions about alignment, spacing, and layout become almost automatic.

Start with a 12-column grid, use a consistent spacing scale, define your breakpoints, and always test with real content. Your layouts will feel more intentional, and you'll spend less time nudging things by a pixel here and a pixel there.

Want to see how your grid looks in a real mockup? Try the NewForm Mockup Studio to generate premium visual presentations from your designs.

---

Original carousel by @sajon.co, view the original post on Instagram.