Grid-area's geven in CSS Grid de mogelijkheid meerdere cellen in een grid te benoemen tot een area: een gebied.
Je kunt vervolgens elementen aan een benoemd gebied koppelen.
Bij een mediaquerie hoef je vervolgens alleen de benoemde cellen anders over de rijeen en kolommen te verdelen om een heel nieuwe layout te maken.
De tipsite van fase 1 kan met CSS Grid een mooie make-over krijgen. bron: https://blanken5.home.xs4all.nl/tipsBronnen.html
Hij is volledig responsive. Er kunnen elementen als illustratie verschijnen, en de lay-out kan een totaal anders worden.
Dit is goed te doen met grid-areas, die vertellen in welke gebieden de elementen moeten komen.
De site bestaat uit een header, aside en fouter en 10 sections. Elke tip zijn eigen section en een markant nummer.
Elke sectie bestaat uit een kop en een article, waarbinnen weer een kop en meerder paragrafen en eventueel een afbeelding geplaatst wordt.
Het is belangrijk dat elke sectie een class-naam krijgt, die bestaat uit het kernwoord van zijn inhoud.
De inhoud wordt eenvoudigweg geselecteerd uit de bronpagina en geplakt in het article.
Boven elk article, nog binnen de section komt een h3-element, met het nummer van de tip.
De aside heeft behalve een kop een lijst met linkjes naar andere tip-sites. Deze linkjes zijn hier niet echt, maar dat kan natuurlijk wel!
De footer verwijst naar de bron, degene die de pagina verwerkt heeft, en de validatie-iconen.
We beginnen met de opmaak voor mobiele apparaten: mobile first. Er is praktisch sprake van een 1-koloms lay-out.
Nadat het stijlblad is gekoppeld worden eerst de marge en padding van de body op 0 gezet en het font op sans-serief geplaatst.
Je ziet ook hoe een Google-font in de CSS wordt geïmporteerd met @import.
De header, aside en footer krijgen hun tekst- en achtergrondkleur.
(de tagline wordt overigens niet goed geselecteerd!!)
De verschillende elementen krijgen padding.
De linkjes kun je het beste zelf de padding geven, dan sluiten ze mooi aan tegen de zijkant.
Daarvoor moet de list-style-type van de opsommingslijst en zijn padding en marge worden verwijderd.
De koppen krijgen het geïmporteerde font.
De kleuren van de aside koppen en linkjes worden verwisseld en de linkjes krijgen een hover-status. De tipnummers krijgen net als de aside-kop een witte kleur.
De lay-out voor mobiele viewports is praktisch klaar.
Binnen de sectie is het de bedoeling dat het nummer in een verticale kolom naast het article komt.
We geven hem eerst de juiste grootte en breedte.
Vervolgens gaan we met CSS-Grid aan de slag. We maken elke sectie tot grid-container met de declaratie display: grid;
Vervolgens geven we de grid-layout van de sectie met grid-template-columns: auto 1fr;
Hierdoor heeft de section 2 kolommen. De eerste is net zo breed als het nummer en de tweede krijgt de overige breedte.
De afstand van het article kan met grid-gap eenvoudig worden ingesteld, maar hier kiezen we voor een padding voor het article, zodat ook de andere kanten wat ruimte krijgen.
De marge van de koppen 3 is fors en krijgen buiten de section geen kleur. Daarom zette we ze op 0 en geven we wat padding.
Merk op dat de padding van de nummers in em forse waarden aanneemt, omdat zijn font-grootte ook fors is.
De breedte van afbeelding in het article wordt beperkt met width: 100%;
We gaan nu met een mediaquery naar een lay-out met 2 kolommen. Daarvoor gaan we hier grid-areas inzetten.
Grid-area zijn een uitbreiding van de grid definitie. Je doet dat dus voor de grid-container met display: grid; en bijvoorbeeld grid-template-columns: ……
Daarna vertel je welke area’s (gebieden) er zijn voor de gedefinieerde kolommen en rijen. Je doet dat bijvoorbeeld met
grid-template-areas: “kop kop”
“vak1 vak2”
“vak3 vak2”
“vak3 aside”
“voet voet”;
Hierbij is er dus sprake van 2 kolommen. De voet en kop spreiden zich over 2 kolommen uit, en vak2 en vak3 over 2 rijen.
Merk op dat de afsluitende ; pas na de laatste rijbeschrijving geplaatst wordt.
Hierna moet met grid-area de gebieden nog aan de elementen gekoppeld worden, maar da zie je in de volgende video.
Om de grid-areas te gebruiken moet je de grid-elementen toewijzen aan de gebieden.
Dit gaat met .naam-element { grid-area: area-naam; }
Dit is in dit voorbeeld dus voor 13 elementen. Dat is misschien wel een klusje, maar in de volgende tutorials zie je dat je daarmee met eenvoudige aanpassingen veel kunt bereiken.
In de footer en de tip met de afbeelding, moeten de elementen naast elkaar om een betere verdeling te krijgen.
Dit kan eenvoudig door die elementen een grid-container te maken. In het article moet de kop wel over de 2 kolommen gestrekt worden.
De lay-out blijkt niet zo optimaal. Maar omdat we met grid-area werken hoeft er alleen maar in de grid-template-areas een kleine aanpassing gedaan te worden.
Het is zo klaar!
Om naar een 3 koloms-layout over te gaan is dus ook weinig werk.
Het gaat letterlijk in 5 minuten!
In de nieuwe mediaquery hoeft alleen de grid-container (hier de body) aangepast te worden. En daarvan dan alleen de grid-template-columns en de grid-template-areas.
Er zijn nu 3 (gelijke) kolommen en elke rij bevat dus precies 3 gebiedsnamen.
Naar verwachting zijn er ook minder rijen.
Maak een extra mediaquerie met 5 koloms-layout en een extra illustratieve (geen informatieve) afbeelding tussen de tips.