CSS Grid

H1. CSS Grid
WDV-IV
Week 14
1 / 12
suivant
Slide 1: Diapositive
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

Cette leçon contient 12 diapositives, avec quiz interactif et diapositives de texte.

Éléments de cette leçon

H1. CSS Grid
WDV-IV
Week 14

Slide 1 - Diapositive

Planning
  • Terugblik op flexbox
  • Waarom CSS Grid?
  • Hoe gebruik je CSS Grid?
  • Oefenen met CSS Grid!

Slide 2 - Diapositive

Slide 3 - Question de remorquage

Waarom CSS Grid?
Onze websites
hebben tot nu
toe redelijk simpele
layouts gehad.

Maar dat blijft niet zo...

Slide 4 - Diapositive

Waarom CSS Grid?
Onze websites
hebben tot nu
toe redelijk simpele
layouts gehad.

Maar dat blijft niet zo...

Slide 5 - Diapositive

Waarom CSS Grid?
Onze websites
hebben tot nu
toe redelijk simpele
layouts gehad.

Maar dat blijft niet zo...

Slide 6 - Diapositive

Hoe gebruik je CSS Grid
1. Verdeel je website in
een raster (een grid)

2. Geef aan in welk
'hokje' elk item moet
komen te staan.

Slide 7 - Diapositive

Hoe gebruik je CSS Grid
3. Items kunnen 
meerdere 'hokjes'
hebben.

4. Hokjes kunnen
verschillende grootes
hebben

Slide 8 - Diapositive

Hoe gebruik je CSS grid
1. Maak een container
waarin je grid komt te
staan.

2. Geef aan hoe groot
elk 'hokje' wordt d.m.v.
rijen en kolommen.

Slide 9 - Diapositive

Hoe gebruik je CSS grid
3. Geef elk item een
plaats op de grid.

Slide 10 - Diapositive

Oefenen met CSS grid!
Maak alle oefeningen
op:

CssGridGarden.com
timer
40:00

Slide 11 - Diapositive

De tweede tool: Flexbox
3. Geef elk item een
plaats op de grid.

Slide 12 - Diapositive