Programmeer de volgende layout voor desktops:
En zorg dat hij er zo uitziet op mobiele apparaten:
- De afstand tussen de blokken zijn
16pxvoor zowel de kolommen als de rijen, op zowel desktop als mobiel. - Alle drie de kolommen hebben dezelfde breedte (en deze past zich aan aan de scherm-grootte)
- In blok B staan 150 woorden (tip: typ
lorem150in jouw HTML en druk dan op de tab-toets). Dit blok past zich aan aan de content die erin staat. - De afmetingen van de blokken staan vermeld op het screenshot
Weet je even niet waar je moet beginnen? 🤯 Volg dan onderstaande stappen:
- Belangrijk: Leg je PC of laptop even aan de kant en pak er papier en een pen/potlood bij. Teken bovenstaand plaatje voor Desktops over op papier.
- Teken de grid-lijnen over de blokken heen.
- Bedenk hoe breed en hoe hoog elke row en column moet zijn, en schrijf dat in 'grid-termen' in je schets.
Oké, je mag weer aan je laptop komen!
- Doe even alsof CSS Grid niet bestaat. Maak een simpel container element in
grid-opdracht.htmlmet daarin de item elementen. - Wijs alvast de kleuren toe en zet de letters A - F in de items. Zorg dat de letters netjes in het midden van elk item komen te staan met behulp van flexbox.
- Tijd om het geraamte neer te zetten. Maak van de container een grid-element en beschrijf de
grid-template-rowsengrid-template-columnsaan de hand van jouw schets. - Geef ieder item een
grid-areanaam - Gebruik deze namen om de items aan de grid toe te wijzen met behulp van de
grid-template-areas - Teken nu het plaatje voor Mobiel over op papier. Teken de grid-lijnen over de blokken heen en schrijf de hoogtes en breedtes van de kolommen en rijen erbij.
- Maak een media-query met een breakpoint minimum waarin je Desktops target. (Dit is geen typfout!)
- Verplaats nu het gedeelte van de CSS wat specifiek is voor Desktops naar deze media query.
- Beschrijf buiten de media query een nieuwe grid aan de hand van jouw schets voor Mobiel, door de afmetingen van de
grid-template-rowsengrid-template-columnste beschrijven. - Gebruik de huidige grid-area namen om de items aan de grid toe te wijzen met behulp van de
grid-template-areas - Resize jouw scherm en bekijk jouw CSS Grid in actie!