Basis van grid

grid-template-columns: repeat(3, 1fr) maakt met één regel drie gelijke kolommen en de browser plaatst elk kind in de volgende vrije cel.

Rijen en kolommen tegelijk

Grid, de CSS Grid Layout-module, is gemaakt voor tweedimensionale indeling: rijen en kolommen samen. Je tekent het raster op de container en de items komen in de cellen. Waar flexbox begint met de items en hun afmetingen daaruit laat ontstaan, begint grid met de indeling en past het de items daarin. Daardoor is het een logische keuze voor fotogalerijen, kaartoverzichten en de algemene vorm van een pagina met een kop, zijbalk, hoofdinhoud en voettekst.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* three equal columns */
  gap: 10px;
}
.gallery .wide { grid-column: span 2; }    /* this item covers two columns */

Sporen en de eenheid fr

grid-template-columns somt de breedte op van elke kolom, een spoor genoemd. Je kunt elke lengte gebruiken, zoals 200px 1fr, maar grid voegt een eigen eenheid toe: fr, één deel van de vrije ruimte. 1fr 1fr 1fr maakt drie gelijke kolommen; 2fr 1fr maakt de eerste kolom tweemaal zo breed als de tweede. De eenheid fr verdeelt alleen de ruimte die overblijft na vaste sporen en tussenruimten. Dus 200px 1fr geeft een zijbalk van 200 pixels en laat de hoofdkolom de rest innemen. repeat(3, 1fr) is een kortere schrijfwijze voor 1fr 1fr 1fr. grid-template-rows doet hetzelfde voor rijen, maar vaak laat je rijen ongemoeid en worden ze zo hoog als hun inhoud.

Items plaatsen

Standaard vullen items het raster in bronvolgorde, elk één cel, van links naar rechts en dan op de volgende rij. Om een item groter te maken, laat grid-column: span 2 het twee kolommen beslaan en grid-row: span 2 twee rijen. De lijnen tussen sporen zijn genummerd vanaf 1, dus een raster met drie kolommen heeft lijnen 1 tot 4 en grid-column: 1 / 3 betekent van lijn 1 tot lijn 3. grid-column: 1 / -1 rekt een item over de hele breedte uit, omdat negatieve getallen vanaf het einde tellen.

Gebieden namen geven

Voor een pagina-indeling kun je met grid-template-areas de indeling met woorden tekenen. Elke tekenreeks tussen aanhalingstekens is één rij en elk woord is één cel; door een woord te herhalen laat je een gebied die cellen beslaan. Daarna krijgt elk item grid-area met de bijbehorende naam. De indeling hieronder leest bijna als een schets: de kop over de bovenkant, een zijbalk en de hoofdinhoud naast elkaar en de voettekst onderaan. De indeling voor een telefoon veranderen betekent alleen deze paar tekenreeksen herschrijven, vaak binnen een mediaquery.

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
  gap: 16px;
}
header { grid-area: head; }
aside  { grid-area: side; }
main   { grid-area: main; }
footer { grid-area: foot; }

Kolommen die op het scherm passen

Eén patroon uit de gridhandleidingen van MDN is het onthouden waard: grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)). minmax(150px, 1fr) zegt dat elke kolom minstens 150 pixels moet zijn en mag groeien om de ruimte te delen. auto-fill maakt zo veel kolommen als passen. Het resultaat is een galerij met twee kolommen op een telefoon en vijf of zes op een breed scherm, opnieuw zonder mediaquery. Net als bij flexbox kan grid items in een andere volgorde plaatsen dan de HTML. Dezelfde waarschuwing geldt: houd leesvolgorde en visuele volgorde gelijk.