Grids that do the work for you

Every time you nudge a box “a little to the left”, you make a decision. Make enough of those and a screen starts to feel slightly off, even when nobody can say why. A grid lets you make those decisions once, so every screen after that is faster to design and easier to read.

1. Pick a base unit

Choose one small number and build everything from it. We use 8px: margins, padding, icon sizes and component heights are all multiples of 8. For tight spots inside components, allow half a step, 4px.

• Buttons at 40 or 48px tall, never 43.
• Card padding of 16 or 24px, depending on density.
• Space between sections of 48 or 64px.

2. Choose your columns

Columns give content somewhere to snap to. A good default is 4 columns on phones, 8 on tablets and 12 on desktop. Twelve divides cleanly into halves, thirds and quarters, which covers almost every layout you will need.

Content spans columns; gutters stay the same. A card can take 4 of 12, a hero can take 7. The space between them never changes.

3. Hand it to engineering

The same grid in CSS takes a few lines. When your design file and the code share these numbers, handoff gets a lot quieter.

.page {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;              /* gutter = 2 × base unit */
  padding-inline: 16px;
}

@media (min-width: 1024px) {
  .page { grid-template-columns: repeat(12, 1fr); gap: 24px; }
  .hero { grid-column: span 7; }
  .card { grid-column: span 4; }
}

Try it

Rebuild last week's onboarding screen on a 4-column grid. Align every text block to a column edge, not to the edge of its background. Post the before and after in the community — it's the fastest way to see how much calmer the screen gets.