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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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.
