Generelle layoutmønstre

Flex pattern

Lad flere elementer dele pladsen i en række. Med flex: 1 får de samme vækstfaktor og en basis på nul, så de kan fordele den tilgængelige plads ligeligt. Indholdets minimumsstørrelse kan dog stadig begrænse, hvor meget et element må krympe.

.tasks {
  display: flex;
  gap: 1rem;
}

.task {
  flex: 1;
}

Brug mønstret, når elementerne skal dele pladsen uden at få hver sin faste bredde. Test også med forskellig tekstlængde; det leder videre til intrinsic sizing.

Stack pattern

Grid kan placere flere elementer i samme celle. Det er nyttigt til fx en chip oven på et billede. Elementerne indgår stadig i gridets størrelsesberegning.

.stack {
  display: grid;
}

.stack > * {
  grid-area: 1 / 1;
}

.stack .chip {
  place-self: start end;
}

I øvelsen hedder containeren .container. Placér først billedet og chippen i samme celle. Brug derefter align-self og justify-self, eller kortformen place-self, til at flytte chippen. Undersøg forskellen mellem at flytte et element og at lade det strække sig i cellen.

Bento layout

Et bento-layout består af felter, som kan spænde over flere rækker og kolonner. Med grid-template-areas kan du tegne opbygningen med navne og ændre den samlet ved et breakpoint.

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  grid-template-areas:
    "title title cup"
    "man   list  cup"
    "man   list  tag";

  @media (width < 650px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "title title"
      "cup   man"
      "list  tag";
  }
}

.title { grid-area: title; }
.cup { grid-area: cup; }
.man { grid-area: man; }
.list { grid-area: list; }
.tag { grid-area: tag; }

Hvert navngivet område skal være et sammenhængende rektangel, og hver tekstlinje skal have lige mange celler. Når antallet af kolonner ændres, skal kolonnedefinitionen følge med. Bevar en meningsfuld HTML-rækkefølge, selv om den visuelle opbygning skifter.

Test dig selv.

Site layout og full-bleed

Et page-grid (makro-layout) kan give almindeligt indhold en centreret maksimal bredde, mens udvalgte sektioner går helt ud til kanten.

.container {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1200px) 1fr;
  column-gap: 1rem;

  > * {
    grid-column: 2;
  }

  > .full-bleed {
    grid-column: 1 / -1;
  }
}

Midterkolonnen kan krympe og bliver højst 1200px. De to ydre spor deler den overskydende plads. column-gap giver luft omkring indholdskolonnen, også når de ydre spor bliver små. 1 / -1 spænder fra første til sidste eksplicitte gridlinje.

Undersøg, hvilke elementer der følger indholdskolonnen, og hvilke der spænder over hele gridet. Den videre problemstilling med indhold inde i en full-bleed-sektion behandles i Subgrid.

Test dig selv.

Navngivne gridlinjer

Navne gør hensigten tydeligere end kolonnenumre. Her navngives indholdets startlinje og de to yderlinjer:

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

  > * {
    grid-column: content;
  }

  > .full-bleed {
    grid-column: full;
  }
}

grid-column: content starter ved linjen content og spænder som udgangspunkt over ét spor. Navneparret full-start og full-end gør, at grid-column: full kan spænde mellem dem.

Test dig selv.