UX & UI Design

02 / Grids, Spacing & Responsive

Key question

Where does everything go, on every screen?

Layout determines how content is distributed across a surface. On the web, this surface isn't fixed: it ranges from 320 pixels on a small mobile phone to over 2,000 pixels on a large monitor. A grid, a clear spacing system, and a few breakpoints make this manageable.

Learning objective: You can set up a column grid and spacing system, and plan a layout for mobile, tablet, and desktop.

Order arises from a few, repeated dimensions.

2.1 / The column grid

Columns, gutters, margins.

A grid divides the area into columns. Three dimensions determine it:

Columns

Usually 12 on desktop, 8 on tablet, 4 on mobile.

Piers

The gap between columns, for example 24 px.

Borders

The distance to the screen edge, at least 16 px on mobile.

For body text, an additional maximum width of about 65 to 75 characters applies. That's why text sits in a narrower column on large screens, even if the grid is wider.

The grid is the invisible handrail.

2.2 / Spacing as a system

A scale instead of chance.

Instead of choosing every spacing from scratch, you use a scale, such as 4, 8, 12, 16, 24, 32, 48, and 64 pixels. Small spaces keep related elements together, while large ones separate sections. The law of proximity makes these groupings visible.

In Figma and in the code, the values are stored as tokens, such as space-4 for 16 pixels. This ensures the spacing is identical in both design and implementation.

Proximity reveals what belongs together.

Try it out

Web Grid Generator

Adjust columns, gutters and margins for each breakpoint, view the grid using the Velowerk example, and apply it as CSS or for Figma.

1 · Ausgangslage

Wähle eine Vorlage und passe sie an. Jeder Breakpoint hat sein eigenes Raster.

2 · Breakpoint

Vorschau-Breite (px)

Spalten

Steg (px)

Rand (px)

Max. Inhaltsbreite (px)

Abstands-Skala:Raster zeigenBeispiel-Layout zeigen

VelowerkSERVICE · VELOS · KONTAKT

Dein Velo läuft wieder.

Service, Reparatur und Beratung in Basel. Termin online buchen, Velo bringen, am Abend wieder abholen.

TERMIN BUCHEN

Service

Kurzer Text zum Angebot.

Reparatur

Kurzer Text zum Angebot.

Occasionen

Kurzer Text zum Angebot.

1440 px breit, verkleinert auf 42 % · Rosa: Spalten · Gelb: Ränder

Spaltenbreite

78 px

Inhaltsbreite

1’200 px

Begrenzt, Rand wächst auf 120 px

Teilbar durch

2, 3, 4, 6

So viele gleich breite Elemente passen nebeneinander.

Lesetext

6 Spalten

ca. 69 Zeichen pro Zeile bei 17 px. Über die ganze Breite wären es 141.

Das Raster ist stimmig: Stege und Ränder liegen auf der 8er-Skala.

3 · Übernehmen

/* Web-Raster, erzeugt mit kost.studio */

:root {
  --grid-cols: 4;
  --grid-gutter: 16px;
  --grid-margin: 16px;
  --grid-max: 1200px;
}

@media (min-width: 768px) {
  :root {
    --grid-cols: 8;
    --grid-gutter: 24px;
    --grid-margin: 24px;
  }
}

@media (min-width: 1200px) {
  :root {
    --grid-cols: 12;
    --grid-gutter: 24px;
    --grid-margin: 48px;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);
  max-width: calc(var(--grid-max) + 2 * var(--grid-margin));
  margin-inline: auto;
  box-sizing: border-box;
}

/* Beispiel: Element über 6 Spalten */
.span-6 { grid-column: span 6; }
.full { grid-column: 1 / -1; }

Alle drei Breakpoints in einer Datei. Elemente legst du mit grid-column auf das Raster, zum Beispiel span 6.

2.3 / Responsive Design

Mobile-first, then wider.

Mobile-first means designing the narrowest view first. That’s where you see what is truly important. Wider screens offer more space, but rarely new content. Breakpoints are placed where the layout breaks, not for specific devices.

Typical patterns: columns stack on mobile phones, navigation moves into a tab bar or menu, images are cropped instead of scaled down, and tables turn into cards.

Your mobile shows what really matters.

Exercise

A layout in three widths

Task: Design the Velowerk homepage for three widths.

STEP 1

Set up a grid: columns, gutters and margins for mobile, tablet and desktop.

STEP 2

Define a spacing scale with five to eight values.

STEP 3

Design for mobile first, then tablet and desktop.

STEP 4

Check every view: Where is the main action located, is the text easy to read?

Evaluation: What did you leave out on mobile, and is it really missing on desktop?

← 01 / Fundamentals

03 / Typography in the Interface →

OVERVIEW

GLOSSARY

Legal Notice