CSS Grid

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

H1. CSS Grid

WDV-IV

Week 14

Planning

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

Waarom CSS Grid?

Onze websites
hebben tot nu
toe redelijk simpele
layouts gehad.

Maar dat blijft niet zo...

Waarom CSS Grid?

Onze websites
hebben tot nu
toe redelijk simpele
layouts gehad.

Maar dat blijft niet zo...

Waarom CSS Grid?

Onze websites
hebben tot nu
toe redelijk simpele
layouts gehad.

Maar dat blijft niet zo...

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.

Hoe gebruik je CSS Grid

3. Items kunnen 
meerdere 'hokjes'
hebben.

4. Hokjes kunnen
verschillende grootes
hebben

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.

Hoe gebruik je CSS grid

3. Geef elk item een
plaats op de grid.

Oefenen met CSS grid!

Maak alle oefeningen
op:

CssGridGarden.com

De tweede tool: Flexbox

3. Geef elk item een
plaats op de grid.