oefenen met grid - Seijno/layout-in-css GitHub Wiki

#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-columns
• grid-template-rows
• grid-template-areas
• grid-area

grid-template-columns

grid-template-columns zorgt voor de breedte van de grid stukjes, voorbeeld: grid-template-columns: 1fr 2fr 1fr;

grid-template-rows

grid-template-rows zorgt voor de hoogte van de grid stukken met als voorbeeld: grid-template-rows: 1fr 4fr;

grid-template-areas

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

grid-area maakt van selectors de letters die ik hierboven heb gebruikt: header{ grid-area: h; }