Introduksjon til CSS Grid

CSS Grid er en måte å plassere elementer samtidig både horisontalt og vertikalt. Dette er en mer avansert måte sammenlignet med flexbox, men mer kompleks å mestre.

For å lage et grid, må du sette elementets display-egenskap til verdien grid:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
}

Etter dette vil elementet bli omdannet til et todimensjonalt rutenett, der elementene er plassert vertikalt (kolonner) og horisontalt (rader). Området i skjæringspunktet mellom en kolonne og en rad kalles en celle.

Med spesielle egenskaper kan du plassere elementer både etter rader og kolonner. Dette vil gjøre det enkelt å lage, for eksempel, ting som dette:

I de følgende leksjonene vil vi først lære om plassering av elementer etter kolonner, deretter gå vi videre til å lære om rader, og etterpå kombinerer vi alt sammen.