Ben's Hobbyhoekje -- Over CSS grid layout

Over CSS grid layout

Veel websites zijn gebouwd op een grid-systeem, een raster dat bestaat uit rijen en kolommen, dat lijkt op een tabel. Een populair grid-systeem is Bootstrap, dat werkt met twaalf kolommen (die naar eigen inzicht gecombineerd kunnen worden) en een onbeperkt aantal rijen.
Een beperking van dit soort platforms is dat het aantal kolommen een vast gegeven is. Die beperking heb je niet als je ze zelf programmeert in CSS.

Er zijn binnen CSS drie manieren om een webpagina in te delen met een grid-systeem: grid layout, floating layout en flex layout.
Met deze drie methodes kun je dezelfde resultaten halen, met aanzienlijk minder code.
Op deze pagina wordt de CSS grid layout behandeld.

Dit verhaal leunt zwaar op de uitleg van de module CSS-Grid op w3schools.com: Grid Intro, Grid container en Grid Item (Hier "Cel" genoemd).

De mogelijkheden van het CSS grid layout systeem zijn zeer uitgebreid. Het voert ver om alles in detail te behandelen, maar we proberen het toch.

De CSS gebruikt alleen class voor de opmaak. id kan worden gebruikt als er referenties van of aan JavaScript nodig zijn. De HTML die de cellen in het document zet, zijn allemaal van de vorm <div class=" … ">. De <div>-tags worden vaak genest.
Een grid layout is in principe responsive, maar soms moet je dat afdwingen. Dat kan met een paar eenvoudige ingrepen.

Een grid wordt opgesloten in een container. Er kunnen in een document meerdere containers zijn. Binnen het grid layout-systeem ben je dus niet gebonden aan één opmaak voor de hele pagina.
Binnen de container worden de cellen gedefinieerd. De rijen ontstaan doordat je het aantal kolommen opgeeft.

De HTML ziet er in zijn eenvoudigste vorm als volgt uit:

<div class="grid-container">

  <div class="grid-cel">Cel 1</div>

  <div class="grid-cel">Cel 2</div>

  <div class="grid-cel">Cel 3</div>

  <div class="grid-cel">Cel 4</div>

  <div class="grid-cel">Cel 5</div>

  <div class="grid-cel">Cel 6</div>

</div>

De bijbehorende CSS is:

<style>

.grid-container {

  display:grid;

  grid-template-columns:auto auto auto;

  grid-row-gap:15px;

  grid-column-gap:7px;

  background-color:#c0c0c0;

  padding:5px;

}

.grid-cel {

  background-color:#fafafa;

  border:1px solid black;

  padding:10px;

}

</style>

Dit alles leidt tot :

Cel 1

Cel 2

Cel 3

Cel 4

Cel 5

Cel 6

Hier vallen meteen een paar dingen op:

De cellen beslaan de volle breedte van het parent-element (in dit geval het document), zonder dat je daar iets voor hoeft te doen.
De randen zijn deel van de cel.
De ruimte tussen de rijen is anders dan de ruimte tussen de kolommen. Dat wordt ingesteld in de container met grid-row-gap en grid-column-gap. Deze twee kun je ook in één opdracht schrijven: grid-gap: ruimte_tussen_rijen ruimte_tussen_kolommen.
De content van de cellen is links uitgelijnd. Om dat te veranderen gebruik je de text-align.

Het is mogelijk om cellen samen te voegen, net zoals dat kan bij tabellen met rowspan en colspan. Dat wordt behandeld in het onderstaande.
Let op: Het overzicht bevat voldoende om met grid te kunnen werken, maar de standaard vermeldt meer dan dat. Soms heb je meer nodig, raadpleeg bijvoorbeeld w3schools.com.

CSS voor de container

*Eigenschap*		*Beschrijving*
width		Breedte van de container.
height		Hoogte van de container.
display		• grid. Maakt een grid met rijen en kolommen, zoals in het voorbeeld hier boven. Het grid beslaat de hele breedte van het parent-element. • inline-grid. Maakt een grid dat niet meer ruimte inneemt dan nodig is, meestal minder dan de breedte van het parent-element.
grid-column-gap		Breedte van de ruimte tussen de kolommen.
grid-row-gap		Hoogte van de ruimte tussen de rijen.
grid-gap		combinatie van grid-row-gapen grid-column-gap. Twee afmetingen, eerst de ruimte tussen de de rijen, daarna de ruimte tussen de kolommen. Als die gelijk zijn volstaat één afmeting.
Bij het samenvoegen cellen wordt binnen CSS de term line gebruikt. Dat is de horizontale of verticale scheidingslijn tussen de rijen of kolommen van het grid. Zie de figuur hiernaast. In het volgende wordt de term line gebruikt voor zowel de horizontale als de verticale lijnen. Uit de context blijkt welke lijnen bedoeld worden.
grid-column-start		Volgnummer van een column line, geteld vanaf 1. Geheel getal. Het mag ook negatief zijn. Vaak samen te gebruiken met grid-column-end. Hiermee voeg je een aantal cellen op een rij samen, zie het voorbeeld hieronder.
grid-column-end		Volgnummer van een column line, geteld vanaf 1. Geheel getal. Het mag ook negatief zijn. Vaak samen te gebruiken met grid-column-start. De code: `grid-column-start: 1; grid-column-end: 3;` voegt de cellen tussen de lines 1 en 3 samen. Dat zijn dus de eerste twee cellen in een rij. Om dit voor elkaar te krijgen heeft de eerste cel een inline style of een aparte klasse waarin de CSS-code staat. Zie dit voorbeeld van w3schools.com.
grid-row-start		Volgnummer van een row line, geteld vanaf 1. Geheel getal. Het mag ook negatief zijn. Vaak samen te gebruiken met grid-row-end. Hiermee voeg je een aantal cellen op een rij samen, zie het voorbeeld hieronder.
grid-row-end		Volgnummer van een row line, geteld vanaf 1. Geheel getal. Het mag ook negatief zijn; het teken wordt genegeerd. Vaak samen te gebruiken met grid-row-start. De code: `grid-row-start: 1; grid-row-end: 3;` voegt de cellen tussen de lines 1 en drie samen. Dat zijn dus de eerste twee cellen in een kolom. Om dit voor elkaar te krijgen heeft de eerste cel een inline style of een aparte klasse waarin de CSS-code staat. Zie dit voorbeeld van w3schools.com.
grid-template-columns		Hiermee stel je de breedte van de kolommen in. Dit is een lijst van breedtes, gescheiden door spaties, bijvoorbeeld 100px 200px 300px 300px. Als je wilt dat alle kolommen even breed zijn, geef je elke kolom de waarde auto. Als de breedte van één kolom auto is, past die kolom zich aan zodat het grid toch de hele breedte van het parent-element bezet.
grid-template-rows		Hiermee stel je de hoogte van de rijen in. Dit is een lijst van hoogtes, gescheiden door spaties, bijvoorbeeld 100px 200px 100px 100px. De waarde auto is hier niet mogelijk.
grid-template-areas		Zie bij 'CSS voor items (cellen)' voor uitleg over deze eigenschap.
justify-content		Hiermee worden de cellen binnen de rijen van het grid uitgelijnd. Hiervoor zijn de volgende instellingen mogelijk: • space-evenly. De ruimte tussen de cellen in de rijen wordt gelijk verdeeld. Voorbeeld: rij van 750px breed met daarin 3 cellen van elk 50px breed. Er is 750 − 3 × 50 = 600px over. Dit wordt verdeeld over de 4 lines, dus (van links naar rechts): 150px ruimte, cel 50px, 150px ruimte, cel 50px, 150px ruimte, cel 50px, 150px ruimte. • space-around. Elke cel+gap neemt evenveel ruimte in op de rij. Voorbeeld: Rij van 750px breed, met daarin 3 cellen van elk 50px breed. Er is 750 − 3 × 50 = 600px over. Elke cel krijgt 600 ÷ 3 = 200px ruimte op de rij, aan beide kanten evenveel, dus 100px links en 100px rechts. De ruimte tussen de linker en de middelste cel is nu 2× zo groot als de ruimte tussen de linkerkant en de eerste cel. Aan de rechterkant gebeurt hetzelfde. • space-between. De eerste cel wordt tegen de linkerkant gedrukt. De laatste cel wordt tegen de rechterkant gedrukt. De rest wordt met 'space-evenly' in de rij verdeeld. • center. De cellen worden tegen elkaar gedrukt en in het midden van de rij gezet. • start. De cellen worden tegen elkaar gedrukt en tegen de linkerkant van de rij gezet. • end. De cellen worden tegen elkaar gedrukt en tegen de rechterkant van de rij gezet. Het bovenstaande werkt alleen als de totale breedte van de cellen in een rij (inclusief de breedte van de opgegeven gaps) kleiner is dan de breedte van het grid.
align-content		Hiermee worden de cellen binnen de kolommen van het grid uitgelijnd. Hiervoor zijn de volgende instellingen mogelijk: • space-evenly. De ruimte tussen de cellen in de rijen wordt gelijk verdeeld, op dezelfde manier als bij de rijen. • space-around. Elke cel+gap neemt evenveel ruimte in in de kolom, op dezelfde manier als bij de rijen. • space-between. De eerste cel wordt tegen de bovenkant gedrukt. De laatste cel wordt tegen de onderkant gedrukt. De rest wordt met 'space-evenly' in de kolom verdeeld. • center. De cellen worden tegen elkaar gedrukt en in het midden van de kolom gezet. • start. De cellen worden tegen elkaar gedrukt en tegen de bovenkant van de kolom gezet. • end. De cellen worden tegen elkaar gedrukt en tegen de ondeerkant van de kolom gezet. Het bovenstaande werkt alleen als de totale hoogte van de cellen in een kolom (inclusief de hoogte van de opgegeven gaps) kleiner is dan de hoogte van het grid.

CSS voor de items (cellen)

*Eigenschap*		*Beschrijving*
grid-column		Hiermee voeg je cellen samen over meerdere kolommen, bijvoorbeeld: • grid-column: 1 / 5; : Begin op kolom-lijn 1 en eindig op lijn 5. De cel beslaat nu vier kolommen; • grid-column: 1 / span 3 ; : Begin op kolom 1 en strek uit over 3 kolommen. Let op het verschil met de vorige: Bij de vorige gaat het om kolom-lijnen, bij deze over de kolommen zelf. Zie ook grid-column-start en grid-column-end bij de container. Er is een overlap. Feitelijk is grid-column gedeeltelijk een verkorte schrijfwijze.
grid-row		• grid-row: 1 / 4; : Begin op rij-lijn 1 en eindig op lijn 4. De cel beslaat nu drie rijen; • grid-row: 1 / span 2 ; : Begin op rij 1 en strek uit over 2 rijen. Let op het verschil met de vorige: Bij de vorige gaat het om rij-lijnen, bij deze over de rijen zelf. Zie ook grid-row-start en grid-row-end bij de container. Er is een overlap. Feitelijk is grid-row gedeeltelijk een verkorte schrijfwijze.
grid-area		Hiermee kun je cellen verdelen over meerdere rijen en kolommen, met één opdracht. De syntax is: grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;. Een voorbeeld: grid-area: 1 / 2 / 5 / 6; • : Begin op rij-lijn 1 en eindig op rij-lijn 5 (cel verdeeld over 4 rijen). • : Begin de hierboven samengevoegd cel op kolom-lijn 2 en eindig op kolom-lijn 6 (dus verdeeld ober 4 kolommen.
grid-area		In combinatie met grid-template-areas kun je cellen een naam geven, die je laer gebruikt bij de opbouw van het grid. Dit werkt als volg: `.item1 { /* Elk item met klasse item1 / grid-area: myArea; / de grid-area heeft de naam myArea / } .grid-container { / Reeks verwijzingen naar item1 / grid-template-areas: 'myArea myArea myArea'; / Drie cellen naast elkaar, samengevoegd tot één cel */ }` De namen worden gescheiden door spaties. De hele reeks staat tussen (enkele) aanhalingstekens.

Opmerking:
Zoals bij het begin van dit verhaal is genoemd zijn er binnen CSS drie grid systemen waarmee je hetzelfde kunt bereiken. Je kunt je het beste toeleggen op één systeem en alleen dát gebruiken.
Als je eenmaal een van de drie systemen grid, float of flex hebt gekozen, zorg dan dat je er goed in wordt. Deze systemen door elkaar gebruiken geeft verwarring en leidt meestal niet tot het beste resultaat.