Amanoba Logo
Back to Course

Grid, ami skálázódik

Day 11 of 30 · The Playbook 2026 – Mesterkurzus Designereknek

Fix + fluid gridet építesz, ami bírja a különböző tartalomhosszakat és nézetméreteket.

Tanulási cél

  • Definiálsz grid típust (12 oszlop, 8/12/16 modul, container max-width).
  • Kezelsz töréspontokat (xs–xl) konzisztens szabályokkal.
  • Készítesz layout tokeneket (gap, gutter, margin).
  • Dokumentálsz példákat (kártyarács, form, dashboard).

Miért fontos

  • Grid hiányában szétesik a vizuális ritmus.
  • Skálázhatóság: új modulok, új töréspontok kezelésével.
  • Fejlesztői sebesség: ismert konténer- és gap-szabályok.

Magyarázat

  • Container: 1200–1440 px max szélesség, középre igazítva, 24 px belső margó.
  • Oszlopok: 12 oszlop, gutter 16–24 px.
  • Töréspontok: xs 360, sm 640, md 768, lg 1024, xl 1280, 2xl 1440.
  • Gap tokenek: gap.xs=8, sm=12, md=16, lg=24.

Példák

Rossz: Minden oldal más max-widthtel és össze-vissza gapekkel.

Jó: 12 oszlopos grid, egységes gutter, konzisztens breakpoint-szabályok.

Gyakorlat (vezetett, 10-15 perc)

  1. Állítsd be a container és grid paramétereket (oszlop, gutter, margin).
  2. Definiáld a töréspontokat és a gap tokeneket.
  3. Készíts két példát: kártyarács + form layout a gridre.

Gyakorlat (önálló, 5-10 perc)

Dokumentáld a gridet a Playbookban, linkkel Figma/Storybook példákra.

Önellenőrzés

  • Container, oszlop, gutter, breakpoint definiálva.
  • Gap tokenek listázva.
  • Példák dokumentálva.

Opcionális mélyítés