Terug

CSS 4 – Grid

Het CSS Grid is de nieuwste manier om de vlakverdeling van je webpagina te maken. Zoals de naam al aangeeft, verdeel je de pagina over een onzichtbaar grid, waar je zelf de afmetingen van aangeeft.

Stap 1: De tekening en de HTML

Begin met een tekening waarin je het grid en alle grote vlakken tekent.
• 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.

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: auto 300px 300px 300px 300px auto;
    grid-template-rows: 64px 300px 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: verdeel de ruimte die nog over is.

Stap 3: Divs plaatsen in het grid

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

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.

  1. Hieronder zie je twee geschetste wireframes.
    Begin op papier: print de afbeelding uit, en teken de gridlijnen en vlakken. Geef elk vlak een duidelijke naam.

    Wireframe 1

    Wireframe 2

  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!

  3. 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.

  4. 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: .......;
    }
    
  5. 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: ... / ...;