13. CSS Lay-out: Grid en Flexbox

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

13. 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

CSS Grid ontdekken

Opdracht 13.3. 

Bekijk het voorbeeld en beantwoord de vragen in het moduleboekje.

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.

Met welke CSS code geef je aan
dat een HTML element een
CSS grid is?

1. 
2. 
3. 
4. 

Op welke manier maak je daadwerkelijk een
CSS grid?

1. 
2. 
3. 
4. 

Wat doet de volgende CSS Grid code?

1. Plaats alle items van rechts naar links, of beneden naar boven op de grid.
2. Zorg ervoor dat de items niet buiten de CSS grid geplaatst kunnen worden.
3. Geef aan dat het eind van de grid bereikt is.
4. Plaats alle items aan de rechterkant van hun cell (a.k.a. hun 'hokje')

CSS: Flexbox

Waarom Flexbox?

Soms wil je items
alleen horizontaal of
verticaal positioneren.

Een volledig grid
maken is dan meer
werk dan nodig.

Flexbox oefenen met een spelletje

https://flexboxdefense.com

13.8 Opdracht: gallery

Download uit Itslearning gallery.zip. Gebruik je kennis van flexbox en grid om de afbeeldingen na te maken. Kijk in je moduleboekje voor concretere instructies. 

Aan de slag

1. Opdracht gallery (Itslearning - lesmateriaal wdv-II - gallery.zip). Maak de voorbeelden na uit het moduleboekje (pag. 39)
2. Ga aan de slag met weekcheck H1 Dierenwinkel (pag. 40)
3. Klaar met beide bovenstaande opdrachten?:  http://www.flexboxdefense.com/