Introduktion til CSS Grid
CSS Grid er en måde at placere elementer samtidigt både vandret og lodret. Det er en mere avanceret måde sammenlignet med flexbox, men mere kompleks at mestre.
For at lave et grid, skal du angive
elementets display
egenskab til værdien grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
}
Herefter bliver elementet omdannet til et todimensionelt gitter, hvor elementerne placeres lodret (kolonner) og vandret (rækker). Området ved skæringspunktet mellem en kolonne og en række kaldes en celle.
Med specielle egenskaber kan man placere elementer både på rækker og kolonner. Dette gør det nemt at lave, for eksempel, sådanne ting som disse:
I de næste lektioner vil vi først lære om placering af elementer på kolonner, derefter gå videre til at lære om rækker, og efterfølgende samle alt dette.
