CSS grid er CSS-regler til den moderne tids layout til web. Tidligere er der brugt tabeller, floats, position eller flexbox til layout. Flexbox er stadig relevant, men hvor flexbox er til 1-dimensionelle layouts kan grid bruges til at lave mere avancerede 2-dimensionelle layouts.
Der kan findes en mere uddybende beskrivelse af CSS grid på CSS Tricks
Grundlæggende CSS grid
Ligesom med flexbox bruges grid i et parent- / child-forhold, hvor man sætter display: grid (eller grid-inline) på parent element, definere grid’ets layout og så lægges child-elementer i det layout man har defineret i parent med mindre man yderligere specificere et layout for child-elementer.
Her er et eksempel. Læg mærke til, at .container
har display: grid
samt propertien grid-template-columns
. Med grid-template-columns
definere man de kolonner, der skal være i layoutet.
<!--html-->
<section class="container">
<div>Hello World</div>
<div></div>
<div></div>
<div></div>
</section>
/*--CSS--*/
.container {
color: #fff;
display: grid;
grid-template-columns: 200px 50px 200px 200px;
text-align: center;
}
Her ses et simpelt grid-layout. Kolonnerne har størrelse som defineret i CSS-koden ovenfor. Men havde der ikke været indhold i nogle af kolonnerne, så ville indholdet ikke have nogen højde og dermed ikke være synligt.

Havde der været flere elementer end de 4, der er defineret kolonner til ville de overskydende elementer følge samme kolonne-layout. Men for, at de skulle være synlige skulle der være indhold i mindst et af elementerne i række nr. 2. Ellers ville de ikke være synlige.
I eksemplet her er der sat flere HTML-elementer ind, men CSS-koden er den samme
<!--html-->
<section class="container">
<div>Hello World</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>How</div>
<div>are</div>
<div>you?</div>
</section>

Grid i 2 dimensioner
Med grid-template-rows er det muligt også at definere, hvordan rækker skal se ud med CSS grid. I næste eksempel er der sat værdier for rækker (og farver er fjernet fra eksempel fordi jeg ikke kan komme på flere farver).
<!--HTML-->
<section class="container">
<div>Hello World</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>How</div>
<div></div>
<div></div>
<div>are</div>
<div></div>
<div></div>
<div>you?</div>
</section>
/*--CSS--*/
.container {
display: grid;
grid-template-columns: 200px 50px 200px 200px;
grid-template-rows: 50px 100px 200px;
text-align: center;
}

I eksemplet ser man, at 1. række er 50px høj, 2. række 100px og 3. række 200px.
fr: fractions
Med CSS grid kan man bruge fr, der står for fractions, altså brøkdele. 1fr svarer til 1 brøkdel af bredden i grid-template-columns
og har man delt kolonnerne op som med koden herunder får man 1 kolonne, der fylder 25% af bredden, 1 kolonne, der fylder 50% af bredden og til sidst igen en kolonne, der fylder 25% af bredden.
/*--CSS--*/
.container {
grid-template-columns: 1fr 2fr 1fr;
}
repeat()
Har man den samme struktur flere gange enten ved grid-template-columns eller grid-template-rows kan man bruge repeat()-funktionen. Her gentages f.eks. samme mønster 3 gange
/*--CSS--*/
.container {
grid-template-columns: repeat(3, 1fr 2fr 1fr);
}