3. semester / Tema 13C: Frontend Design

Subgrid i praksis

Brug subgrid til at dele spor og linjenavne på tværs af nested layouts.

Se undervisningsslides

Relevante links

Hvor er Subgrid gavnligt?

Subgrid løser et klassisk problem i grid-layouts: at nested elementer ofte mister forbindelsen til parentens kolonner og linjer.

Med subgrid kan en child-grid arve sporene direkte. Det betyder, at du kan placere indhold i nested wrappers, og det vil stadig alignes med resten af siden.

Subgrid er især nyttigt i disse scenarier:

Makro-layouts: hvor du har full-bleed sektioner, men stadig vil have indhold, der aligner med resten af siden.
Card-lister: hvor du vil have fælles linjer for overskrifter, brødtekst og footers, selv når indholdslængden varierer.
Komplekse nested grids: hvor du vil undgå duplikerede kolonner.

Giv grid-linjerne navne

Navngivne linjer giver mere stabile layouts end “bare tal”. Det bliver også lettere at flytte rundt på track-størrelser senere.

Et godt pattern er:

navngiv centrale linjer på parent-grid
brug subgrid i nested wrappers
placer child-indhold med linjenavne i stedet for tal

Øvelse 1

Linjenavne i praksis

Denne øvelse viser, hvorfor navngivne linjer er mere robuste end tal:

grid-column: 3 betyder ikke nødvendigvis det samme i parent og child
en navngivet linje (fx c) kan bruges konsekvent på tværs af subgrid
subgrid arver ikke bare størrelser, men også linjenavne på den akse du vælger

Øvelse 2

Makro-layout med full-bleed

Denne øvelse viser et stærkt mønster til sider og sektioner:

body definerer de overordnede spor (full-bleed + content)
header, main, footer og section bruger subgrid
child-indhold placeres tilbage på content-sporet

Den tiltænkte progression er som følger:

Start med tal (grid-column: 1 / -1 og grid-column: 2) for at forstå mekanikken.
Gå derefter til navngivne linjer (full, content) for læsbarhed og vedligehold.

Det er præcis den slags omskrivning, der gør CSS mere robust, når designet ændrer sig.

Øvelse 3: “Designerens blik” (fælles rækker i cards)

Her er fokus ikke kun kolonner, men vandrette linjer i en card-liste: overskrifter, brødtekst og footer skal lande pænt, selv når indholdslængden varierer.

parent (.cards) laver gridet for listen
hvert .card bliver selv et grid
grid-template-rows: subgrid låner parentens rækker
grid-row: span 3 fortæller, at cardet skal spænde over 3 fælles rækker (header, tekst, footer)

Det er en god øvelse i at tænke som en designer: “jeg vil have fælles linjer”, ikke bare “jeg vil have tre bokse ved siden af hinanden”.

Faldgruber (når subgrid “ikke virker”)

Typiske fejl, når subgrid “ikke virker”:

elementet er ikke sat til display: grid
elementet er ikke et grid-item i parenten
man forventer arvede spor uden at bruge grid-template-columns: subgrid
man sætter subgrid på kolonner, men problemet ligger i rækker (eller omvendt)
man glemmer grid-row: span ... i card-mønstre med row-subgrid