H1. CSS Lay-out: Grid en Flexbox

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

H1. CSS Lay-out: Grid en Flexbox

WDV-IV

Week 14

Terug naar de Front-end

• HTML en CSS
• CSS: Grid
• CSS: Flexbox
  

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

CSS: Grid

Grid = raster

CSS: Grid

CSS: Grid

Alle children worden op de Grid uitgelijnd

CSS: Grid

Twee kolommen van 50%

CSS: Grid

50px ruimte tussen de grid items

CSS: Grid

Deze grid item overspant twee regels

Grid oefenen met een spelletje

https://cssgridgarden.com/

1: uitleg

2: code schrijven

3: resultaat

3e verticale grens

1

2

3

Succes met Grid Garden!

✋Na goed lezen en veel proberen een vraag? Steek je hand op!

✅ Klaar? Geef aan dat je klaar bent. Je mag even wat voor jezelf doen.

CSS: Flexbox