Grid container

Bekijk de video

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

Opdrachten

Maak zoals in de video een nieuw HTML-bestand met een <style> block in de <head>.
Maak in de HTML een grid container div (zie video).
Maak in de grid container div nu minimaal 10 grid items
Geef de grid items met een CSS class dezelfde achtergrondkleur, tekstkleur en een beetje padding.

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

Hier vind je stukjes code die je kunt gebruiken in je oplossing. Je moet zelf bedenken waar dit moeten komen. Gebruik de video hierbij!.

Grid container

<div id="dashboard"></div>

Grid items

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>

.item {
    background-color: maroon;
    color: #ffffff;
    padding: 5px;
}