Tilbage til Layout, del 2

3. semester / Tema 13C: Frontend Design

Subgrid i praksis

Skab fælles alignment i cards, og lad indhold i nested wrappers følge sidens grid.

Se undervisningsslides

Relevante links

Hvor er Subgrid gavnligt?

Et grid styrer sine direkte børn. Når et barn selv bliver et grid, får det normalt sine egne spor. Derfor kan overskrifter, tekst og knapper i nabokort miste deres fælles alignment, selv om kortene står pænt i det overordnede grid.

Med subgrid deler et nested grid de spor, det spænder over i parentens grid. Du vælger selv, om det gælder rækker, kolonner eller begge akser. Det er nyttigt til både card-lister og full-bleed-sektioner, hvis indhold skal følge resten af siden.

Fælles rækker i cards

Tre kort med hver sit grid-template-rows: auto auto auto beregner deres rækker uafhængigt. En lang overskrift i ét kort flytter derfor ikke automatisk teksten i nabokortene.

Lad kortene dele rækker i stedet:

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: 1rem;
}


.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

grid-row: span 3 giver hvert kort tre rækker at dele, fx overskrift, tekst og footer. Indhold i kortene bidrager til de fælles rækkers størrelse, så en høj overskrift giver plads i samme række på tværs af kortene.

Hvis der kommer flere kort end de tre kolonner kan rumme, opretter parent-gridet flere implicitte rækker. Kortene på næste række deler deres egen gruppe af spor. De arver ikke automatisk samme højder som gruppen ovenover.

Prøv længere overskrifter og mere brødtekst i demoen. Se især, hvordan fælles rækker adskiller sig fra blot at give kortene samme samlede højde.

Øvelse: Fix alignment

Få labels og værdier i specifikationslisterne til at flugte som i referencen. Hver række har i udgangspunktet sit eget grid med max-content 1fr, så labelbredden kan variere mellem rækkerne.

Undersøg, hvilket element der skal definere de fælles kolonner, og lad rækkerne låne dem med subgrid. Husk både display: grid og at spænde over de spor, der skal deles. Test med et længere label, når linjerne flugter.

Page layout og full-bleed

I layoutmønstrene fra del 1 placeres almindeligt indhold i midterkolonnen, mens en full-bleed-sektion spænder over hele gridet. Men sektionens børn får ikke automatisk adgang til sidens kolonner.

Undersøg først problemet i demoen: hvilke elementer følger indholdsbredden, og hvilke ligger inde i en wrapper, der afbryder forbindelsen?

Lad full-bleed-sektionen dele sidens kolonner:

.container {
  display: grid;
  grid-template-columns:
    [full-start] 1fr [content] minmax(0, 1200px) 1fr [full-end];
  column-gap: 1rem;


  > * {
    grid-column: content;
  }
}


.container > .full-bleed {
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid;


  > * {
    grid-column: content;
  }
}

Sektionen spænder over sidens grid, men dens indhold kan stadig placeres på linjen content. Hvis der er flere wrappers imellem, skal forbindelsen etableres gennem de relevante grid-items på hvert niveau.

Giv grid-linjerne navne

Et subgrid nummererer sine linjer lokalt fra 1. Derfor peger grid-column: 3 ikke på samme linje i parent og subgrid. Navngivne linjer fra parenten er også tilgængelige i subgridet på den delte akse og inden for dets spænd. Se mere i nedenstående demo.

Gør .box-2 til et subgrid, og sammenlign placering med linjenummer og linjenavn. Navngiv den relevante linje c, og brug grid-column: c på både .box-1 og .box-2b.

Øvelse

Makro-layout med full-bleed

Lad body definere sidens spor. Lad derefter de relevante wrappers dele kolonnerne med subgrid, og placér deres indhold på content-sporet. Start eventuelt med tal, og omskriv derefter til navngivne linjer.

Faldgruber

Hvis linjerne ikke flugter, så kontrollér:

Ressourcer