Grid kolommen

Bekijk de video

Bekijk de video fullscreen en doe daarna de oefeningen / opdrachten.

Opdrachten

Met de kennis uit de video:

Definieer in je CSS-bestand een grid met minstens 4 kolommen en 2 rijen.
Probeer de eenheden px, fr en % uit en kijk wat er gebeurt als je verschillende waarden invoert.
Geef elke grid item div de class item en ook een eigen item1, item2 (enzovoorts) class. *Je kunt ze dan straks beter afzonderlijk stijlen**

Bewijs opslaan

Sla je wijzigingen op.
Maak een screenshot van het resultaat in je browser en bewaar deze bij je code.
Maak een commit met een duidelijke commit message

Hulp

Gebruik je eigen afmetingen, dus denk zelf na en speel met die afmetingen! Kijk wat er gebeurt als je de browser resized.

#dashboard {
    grid-template-columns: 100px 200px 1fr 2fr;
}

<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>

Meer info over Grid kolommen maken

Grid rijen