HTML & CSS Les 4 – Grid

CSS – Grid

Er zijn veel manieren om de vlakverdeling van je pagina te maken. Wij kiezen voor grid. Zoals de naam al aangeeft, verdeel je de pagina over een onzichtbaar grid, waar je zelf de afmetingen van aangeeft.

Je ziet en leest hier eerst het stappenplan voor het maken van een grid. Onderaan deze pagina vind je de opdracht van deze les

Stap 1: De tekening en de HTML

Begin met een tekening waarin je het grid en alle grote vlakken tekent.
• Teken alleen de grote vlakken, zoals in bovenstaand voorbeeld. Ga niet om élk element een lijntje tekenen.
• Geef elk vlak in het grid een id.
• Nummer elke horizontale en verticale lijn.
• Zet bij elke rij en kolom (een schatting van) de afmeting.

Let op: als je vw voor de breedtes gebruikt, zou de som van alle kolommen 100vw moeten zijn als je wilt dat de pagina in de breedte beeldvullend is. Voor de hoogtes kun je kiezen tussen auto, vw, px. Zoals we in de vorige les hebben geadviseerd kun je in veel gevallen het beste de inhoud de hoogte laten bepalen, dit doe je met auto. Anders kun je vh of px gebruiken.

Maak in HTML voor elk vlak een div. Geef elke div in CSS een achtergrondkleur.

<body>
    <div id="nav"></div>

    <div id="storyleft"></div>
    <div id="storyright"></div>

    <div class="featured" id="article1"></div>
    <div class="featured" id="article2"></div>
    <div class="featured" id="article3"></div>

    <div id="latest"></div>
</body>

#nav {
    background-color: blue;
}

/* enzovoorts... */

Stap 2: Het grid maken

body {    
    display: grid;
    grid-template-columns: 20vw 15vw 15vw 15vw 15vw 20vw;
    grid-template-rows: 10vh 45vh auto;
}

Met de eigenschap display: grid geef je aan dat je een CSS grid van de body gaat maken.
Vervolgens geef je met grid-template-columns en grid-template-rows aan uit hoeveel kolommen en rijen je grid bestaat, en hoe groot ze zijn. In het bovenstaande voorbeeld zie je dus 6 kolommen en 3 rows.
Met auto zeg je eigenlijk: laat de inhoud de afmeting bepalen.

Stap 3: Divs plaatsen in het grid

#nav {
    background-color: blue;
    grid-column: 2 / 6;
    grid-row: 1 / 2;
}

Nu kun je elk vlak op zijn plek gaan zetten. Met grid-row geef je aan bij welke rij het element begint en eindigt, gescheiden door een /.
grid-column werkt hetzelfde, maar dan voor de kolommen.

Opdracht

Hieronder zie je twee geschetste wireframes. Kies er eentje om uit te werken
Begin op papier: print de afbeelding uit, en teken de gridlijnen en vlakken. Geef elk vlak een duidelijke naam.

Wireframe 1

Wireframe 2
Maak een nieuwe website-map met een HTML en CSS bestand. Link het HTML bestand aan de stylesheet. Vergeet ook de reset code niet in je css bestand te zetten!
Maak in HTML alle div-elementen die je nodig hebt: voor elk vlak één. Geef elk element een duidelijke id.
Geef in CSS elk vlak een andere achtergrondkleur.
Plak de volgende code in je CSS bestand en pas het aan zodat je de juiste hoeveelheden en afmetingen kolommen en rijen hebt.

Tip: Als je in Chrome de pagina inspecteert (Alt+Cmd+I op Mac, and Ctrl+Alt+I op Windows) en je met je muis over het body element gaat, kun je de gridlijnen zien van je pagina.
```
body {    
    display: grid;
    grid-template-columns: .......;
    grid-template-rows: .......;
}
```
Plak de volgende code bij elke div in je CSS bestand, en pas het aan zodat je divs op de juiste plekken in het grid komen te staan.
```
grid-row: ... / ...;
grid-column: ... / ...;
```