H1. CSS Lay-out: Grid en Flexbox

WDV-IV

Week 14

1 / 19

Slide 1: Slide

Applicatie- en mediaontwikkelaarMBOStudiejaar 1

This lesson contains 19 slides, with text slides.

Items in this lesson

H1. CSS Lay-out: Grid en Flexbox

WDV-IV

Week 14

Slide 1 - Slide

Terug naar de Front-end

HTML en CSS
CSS: Grid
CSS: Flexbox

Slide 2 - Slide

Waarom CSS Grid?

Onze websites
hebben tot nu
toe redelijk simpele
layouts gehad.

Maar dat blijft niet zo...

Slide 3 - Slide

Waarom CSS Grid?

Onze websites
hebben tot nu
toe redelijk simpele
layouts gehad.

Maar dat blijft niet zo...

Slide 4 - Slide

Waarom CSS Grid?

Onze websites
hebben tot nu
toe redelijk simpele
layouts gehad.

Maar dat blijft niet zo...

Slide 5 - Slide

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 6 - Slide

Hoe gebruik je CSS Grid

3. Items kunnen
meerdere 'hokjes'
hebben.

4. Hokjes kunnen
verschillende grootes
hebben

Slide 7 - Slide

CSS: Grid

Grid = raster

Slide 8 - Slide

CSS: Grid

Slide 9 - Slide

CSS: Grid

Alle children worden op de Grid uitgelijnd

Slide 10 - Slide

CSS: Grid

Twee kolommen van 50%

Slide 11 - Slide

CSS: Grid

50px ruimte tussen de grid items

Slide 12 - Slide

CSS: Grid

Deze grid item overspant twee regels

Slide 13 - Slide

Grid oefenen met een spelletje

https://cssgridgarden.com/

Slide 14 - Slide

Slide 15 - Slide

1: uitleg

2: code schrijven

3: resultaat

Slide 16 - Slide

3e verticale grens

Slide 17 - Slide

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.

Slide 18 - Slide

CSS: Flexbox

Slide 19 - Slide

H1. CSS Lay-out: Grid en Flexbox

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

Slide 4 - Slide

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Slide

Slide 8 - Slide

Slide 9 - Slide

Slide 10 - Slide

Slide 11 - Slide

Slide 12 - Slide

Slide 13 - Slide

Slide 14 - Slide

Slide 15 - Slide

Slide 16 - Slide

Slide 17 - Slide

Slide 18 - Slide

Slide 19 - Slide

More lessons like this

13. CSS Lay-out: Grid en Flexbox

CSS Grid