HTML Module 3 Les 3.5 t.b.v. studenten applicatie en media van MBO Rijnland Leiden

1. 3.5 grid vervolg
HTML module 33.5 Grid 2

2. Lesdoel!
HTML module 33.5 Grid 2
• Terugblik
• grid-template-areas
• grid-area
• justify-self
• align-self
• column-gap
• row-gap

3. Terugblik
HTML module 33.5 Grid 2

4. HTML module 33.5 Grid 2
property
display: grid
grid-template-columns
grid-template-rows
css-grid

5. HTML module 33.5 Grid 2
Columns toevoegen Gridgrid-template-columns
Flexbox

6. HTML module 33.5 Grid 2
Columns toevoegen Grid
grid-template-columns

7. HTML module 33.5 Grid 2
Columns Grid eenheden
Te gebruiken eenheden voor columns
• fr (flex grootte)
• Percentage
• VW
• PX
• Points
• En andere

8. HTML module 33.5 Grid 2
repeat();
repeat kan gecombineerd worden!

9. HTML module 33.5 Grid 2
property
display: grid
grid-template-rows
css-grid

10. HTML module 33.5 Grid 2
rows toevoegen Grid
grid-template-rows
rij1
rij2

11. HTML module 33.5 Grid 2
Te gebruiken eenheden voor rows
• fr (flex grootte)
• Percentage
• VW
• PX
• Points
• En andere
rows eenheden

12. HTML module 33.5 Grid 2
Column/row start-end
grid-column-start
grid-column-end
grid-row-start
grid-row-end

13. HTML module 33.5 Grid 2 row start-end
grid-row-start grid-row-end
Cols en rows een naam geven
en gebruiken!

14. HTML module 33.5 Grid 2 row start-end
grid-row-start
grid-row-end
shorthand
lang
grid-column-start
grid-column-end

15. HTML module 33.5 Grid 2
Nieuwe Stof

16. HTML module 33.5 Grid 2 grid-tempate-areas
grid-template-areas grid-area
Hiermee kan je de pagina indelen in areas.
Zoals hieronder afgebeeld

17. HTML module 33.5 Grid 2 grid-tempate-areas
grid-template-areas grid-area
Met grid-area kun je het item plaatsen in de area.
Zoals hieronder afgebeeld.

18. HTML module 33.5 Grid 2 grid-tempate-areas
grid-template-areas grid-area
Voorbeeld

19. HTML module 33.5 Grid 2
Opdracht
Maak onderstaand voorbeeld.
En deel het in d.m.v. grid-template-areas en
grid-erea.
We nemen hier max 20 minuten de tijd voor!

20. HTML module 33.5 Grid 2
justify-self start
end
center
stretch

21. HTML module 33.5 Grid 2
justify-self

22. HTML module 33.5 Grid 2
justify-self:
start
end
stretch
center
justify-self

23. HTML module 33.5 Grid 2
align-self start
end
center
stretch

24. HTML module 33.5 Grid 2
align-self

25. HTML module 33.5 Grid 2
align-self:
start
end
stretch
center
align-self

26. HTML module 3
Opdracht
Maak onderstaande na met gebruik van GRID
We nemen hier max 15 minuten de tijd voor!
3.5 Grid 2

27. HTML module 33.5 Grid 2
column-gap row-gap

28. Huiswerk opdracht !
HTML module 3
Maak met behulp van grid vanuit deze les de wireframe
van de volgende pagina.
Lever het geheel als zip/rar bestand in bij de opdracht
van deze les in teams.
Doe dit voor het begin van de volgende les en voorkom
minpunten aan het eind van deze module.
Plus oefenen baart kunst.
3.5 Grid 2

29. wireframe opdracht !
HTML module 33.5 Grid 2