oefenen met grid
#oefenen me grid voor deze css oefening heb ik gebruik gemaakt van grid, hiermee kan je makkelijk structuur geven aan je site en overzichtelijk werken. met grid gebruik je de volgende css lines:
grid-template-columnsgrid-template-rowsgrid-template-areasgrid-area
grid-template-columns zorgt voor de breedte van de grid stukjes, voorbeeld:
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows zorgt voor de hoogte van de grid stukken met als voorbeeld:
grid-template-rows: 1fr 4fr;
grid-template-areas geeft de vorm van de indeling waardoor je kan zorgen dat bijvoorbeeld de header op de goede plek komt:
grid-template-areas: "h h f" "n m f";
(psst meer over de letters hieronder)
grid-area maakt van selectors de letters die ik hierboven heb gebruikt:
header{ grid-area: h; }