Meester van CSS Grid: Een diepgaande verkenning

Meester van CSS Grid: Een diepgaande verkenning

Lesdoelen

Aan het einde van de les kun je uitleggen wat CSS Grid is en de belangrijkste eigenschappen van gridcontainers en -items benoemen.

Wat weet je al over CSS Grid en hoe verschilt het van flexbox?

Activeren van voorkennis

Wat zijn de belangrijkste verschillen tussen CSS Grid en flexbox?

Wat is grid

CSS Grid is een lay-outmodule waarmee je complexe ontwerpen kunt maken door elementen te plaatsen in een tweedimensionaal grid.

Containers en items

In CSS Grid zijn er specifieke elementen die als containers dienen en de elementen die daarin geplaatst worden zijn de items.

Container properties

Gridcontainer eigenschappen, zoals 'display: grid', 'grid-template-rows', 'grid-template-columns' en 'grid-gap', bepalen de structuur van het grid.

Item properties

Item eigenschappen, zoals 'grid-column', 'grid-row' en 'align-self', bepalen de positie en het gedrag van individuele griditems.

Klassikale oefening

Maak een gridlay-out voor een webpagina met behulp van CSS Grid.

Individuele oefening

Pas een bestaande webpagina lay-out aan met behulp van CSS Grid in plaats van flexbox.

Lesdoelen toetsen

Wat zijn de belangrijkste verschillen tussen CSS Grid en flexbox? Geef een voorbeeld van een grid-container eigenschap.

Schrijf 3 dingen op die je deze les hebt geleerd.

De leerlingen voeren hier drie dingen in die ze in deze les hebben geleerd. Hiermee geven ze aan wat hun eigen leerrendement van deze les is.

Schrijf 2 dingen op waarover je meer wilt weten.

De leerlingen voeren hier twee dingen in waarover ze meer zouden willen weten. Hiermee vergroot je niet alleen betrokkenheid, maar geef je hen ook meer eigenaarschap.

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.