HTML Module 3 Les 3.6 Terugblik

1. 3.6 grid terugblik
HTML module 33.6 Grid 3

2. Terugblik
HTML module 33.6 Grid 3

3. HTML module 3
property
display: grid
grid-template-columns
grid-template-rows
css-grid
3.6 Grid 3

4. HTML module 33.6 Grid 3
property
display: grid
grid-template-columns
css-grid

5. HTML module 33.6 Grid 3
Columns toevoegen Gridgrid-template-columns
Flexbox

6. HTML module 33.6 Grid 3
Columns toevoegen Grid
grid-template-columns

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

8. HTML module 33.6 Grid 3
Uitwerking opdracht

9. HTML module 33.6 Grid 3
Columns
FR /
Gedeelte van het scherm
automatisch verdeeld.
Responsive

10. HTML module 33.6 Grid 3
repeat();

11. HTML module 33.6 Grid 3
repeat();
Repeat kan gecombineerd worden!

12. HTML module 33.6 Grid 3
repeat();
repeat kan gecombineerd worden!

13. HTML module 33.6 Grid 3
property
display: grid
grid-template-rows
css-grid

14. HTML module 33.6 Grid 3
rows toevoegen Grid
grid-template-rows
rij1
rij2

15. HTML module 33.6 Grid 3
Te gebruiken eenheden voor rows
• fr (flex grootte)
• Percentage
• VW
• PX
• Points
• En andere
rows eenheden

16. HTML module 33.6 Grid 3
Column/row start-end
grid-column-start
grid-column-end
grid-row-start
grid-row-end

17. HTML module 33.6 Grid 3 Column start-end
grid-column-start grid-column-end
Start met grid van 5 columns en
4 rijen verdeeld over het scherm!

18. HTML module 33.6 Grid 3 Column start-end
grid-column-start grid-column-end

19. HTML module 33.6 Grid 3 row start-end
grid-row-start grid-row-end

20. HTML module 33.6 Grid 3 row start-end
grid-row-start grid-row-end
Cols en rows een naam geven
en gebruiken!

21. HTML module 33.6 Grid 3 grid-tempate-areas
grid-template-areas grid-area
Hiermee kan je de pagina indelen in areas.
Zoals hieronder afgebeeld

22. HTML module 33.6 Grid 3 grid-tempate-areas
grid-template-areas grid-area
Met grid-area kun je het item plaatsen in de area.
Zoals hieronder afgebeeld.

23. HTML module 33.6 Grid 3
justify-self:
start
end
stretch
center
justify-self

24. HTML module 33.6 Grid 3
align-self:
start
end
stretch
center
align-self

25. HTML module 33.6 Grid 3
column-gap row-gap

26. Extra
HTML module 33.6 Grid 3

27. HTML module 3
justify-items
3.6 Grid 3

28. HTML module 3
justify-items start
end
center
stretch
Wordt verwerkt in gehele grid!
3.6 Grid 3

29. HTML module 3
justify-items
start
end
center
stretch
3.6 Grid 3

30. HTML module 3
align-items
3.6 Grid 3

31. HTML module 3
align-items start
end
center
stretch
Wordt verwerkt in gehele grid!
3.6 Grid 3

32. HTML module 3
align-items
start
end
center
stretch
3.6 Grid 3

33. Huiswerk opdracht !
HTML module 3
Maak met behulp van grid de webapplicatie
van de volgende pagina’s
Lever het geheel als zip/rar bestand in bij de opdracht
van deze les in teams.
Inleveren uiterlijk maandag 28 maart 2020
3.6 Grid 3

34. HTML module 2
Mobile
Groot scherm en ipad landscape
3.6 Grid 3

35. HTML module 2
IJsland.png
Ijsland_banner.
png
Font = Google fonts: IBM Plex Sans
banner_levering.png
Kleur rood = #ce0930
3.6 Grid 3

36. HTML module 2
Groot scherm en ipad landscape
3.6 Grid 3

37. HTML module 2
Logo_ijsbeer3.png /
bg kleur aliceblue
#E8F0FA
Google fonts: Roboto:100
Mobile
bg kleur aliceblue
en ronde hoeken
3.6 Grid 3

38. HTML module 2
Mobile
3.6 Grid 3