This lesson contains 17 slides, with interactive quiz and text slides.
Lesson duration is: 60 min
Items in this lesson
CSS Grid
Slide 1 - Slide
Leerdoelen
Je past CSS Grid toe om een gestructureerde lay-out te creëren.
Je past de CSS Grid-eigenschappen correct toe om elementen binnen een grid te positioneren.
Je gebruikt grid-rijen en -kolommen om de opmaak van een tijdschriftartikel effectief te beheren.
Slide 2 - Slide
Wat is een grid eigenlijk?
Slide 3 - Mind map
Slide 4 - Slide
Slide 5 - Slide
Een grid is een soort raster dat je kunt gebruiken om dingen netjes te organiseren. Bijvoorbeeld op een pagina. Je kunt het zien als een onzichtbaar bord met vakjes.
Binnen die vakjes kun je verschillende elementen plaatsen.
Slide 6 - Slide
De kast is je grid container.
De vakken in de kast zijn de rijen en kolommen.
De spullen die je in de vakken zet zijn de grid items.
Slide 7 - Slide
De kast is je grid container.
De vakken in de kast zijn de rijen en kolommen.
De spullen die je in de vakken zet zijn de grid items.
Slide 8 - Slide
De kast is je grid container.
De vakken in de kast zijn de rijen en kolommen.
De spullen die je in de vakken zet zijn de grid items.
Slide 9 - Slide
De kast is je grid container.
De vakken in de kast zijn de rijen en kolommen.
De spullen die je in de vakken zet zijn de grid items.
Slide 10 - Slide
De verticale lijnen zijn de kolommen.
columns binnen CSS
Slide 11 - Slide
De horizontale lijnen zijn de rijen.
rows binnen CSS
Slide 12 - Slide
De ruimte tussen de columns en de rows noemen we gaps.
Waar kennen we gap nog meer van bij CSS?
Slide 13 - Slide
De lijnen tussen de verschillende columns noem je column lines.
De lijnen tussen de rows noem je row lines.
Bij het plaatsen van items verwijs je naar de lines en dus niet het vakje
Lesson duration is: 60 min
