Publicatie: 3 augustus 2024

CSS grid gebruiken

CSS grids zijn super handig. Niet alleen omdat ze veel makkelijker te positioneren zijn dan losse divs, maar vooral omdat je gemakkelijk de lay-out van je site kunt aanpassen aan andere apparaten met verschillende schermgroottes. Wanneer je de werking van grids wat in de vingers hebt, wil je niet meer anders en zul je razendsnel mooie, stabiele lay-outs kunnen ontwikkelen.

De pagina's van BeVries.nl zijn ook vrijwel volledig opgebouwd in grids. Zie hieronder een voorbeeld van de frontpage, met daaroverheen de 'grid-items' die onderdeel zijn van de grids:

In het voorbeeld zie je twee grids: een blauwe en een rode subgrid (een grid in een grid, dat kan ook!). Het rode grid bevindt zich dus in een grid-item van het blauwe grid.

Als je de website echter via je telefoon benaderd, zie deze lay-out er totaal anders uit. De grid-items worden dan heel anders getoond. Het mooie is dat dit enkel een paar regels CSS code vereist. De hele inhoud van alle pagina's blijft gelijk, ongeacht hoe je de website benaderd. Enkel de CSS grid styling bepaalt hoe de lay-out getoond wordt. Bijzonder handig, want zo hoef je niet te rommelen met al je divjes!

Opbouw in CSS

Een voorbeeld van hoe het op deze site wordt toegepast, in de style.css stylesheet:

#main {
	display: grid;
	grid-template-columns: auto 1200px auto;
	grid-template-rows: auto 200px;
	grid-template-areas:
	". mainContent ."
	". mainFooter .";
}
				

Het gaat hier om een div met id "main". Deze div dient als een container voor het hele gebied onder de header.

• Er wordt aangegeven dat deze div een grid bevat, met 'display: grid'
• Er zijn drie kolommen waarbij de middelste 1200px breed is, en de linker- en rechter kolom automatisch (door de auto) zo breed worden als wat er overblijft van de schermbreedte
• Er zijn twee rijen waarbij de onderste 200px hoog is, en de rij erboven de rest van de schermhoogte toegewezen krijgt
• In totaal zijn er dus zes gebieden in deze grid: drie kolommen in twee rijen

Vervolgens wordt de structuur van de grid opgezet door de 'areas' te benoemen.

• Het bevat twee grid-items met een naam: 'mainContent' en 'mainFooter'
• De "." links en rechts van de benoemde grid-items zijn ook grid-items, maar hebben geen 'echte' naam. Dit zijn de lege gebieden links en rechts van de middelste kolom

Het is belangrijk dat wanneer je een grid bouwt, alle velden ook benoemd worden bij grid-template-areas. Anders zal je grid niet goed werken.

Opbouw in HTML

Bovenstaand de HTML code van de div waar eerst de css van werd getoond.

• Je ziet een div met id 'main' die fungeert als container (en grid) voor de daarbinnen gelegen divjes
• De "." gebieden hoef je dus niet te definiëren in de HTML code, wanneer die gebieden geen functie hebben op je site

Tips:

• Als je ruimtes wilt hebben tussen je grid-items, kunt je dit gemakkelijk doen in je CSS code, met row-gap en column-gap. Wanneer je die beide op 15px zet, krijg je tussen de rijen en kolommen een ruimte van 15 pixels
• Je kunt heel simpel je lay-out mobile friendly maken door bij verschillende schermgroottes de grid-template-areas: aan te passen in de CSS. Je hoeft dan niks in je pagina's te doen met divjes, en bepaalt alles vanuit de stylesheet.
• In de bovenstaande voorbeelden wordt de breedte en/of hoogte bepaald met een vaste waarde. Maar dat hoeft niet. Je kunt ook werken met percentages en 'fractions' waarbij je de breedte opdeelt in fr. Op die manier kun je bijvoorbeeld zeggen: grid-template-columns: 1fr 2fr 1fr; om een drietal kolommen zo te verdelen dat kolom 1 25% (één van de vier fracties) breed is, kolom 2 is 50% breed (de volgende twee van de vier fracties) en kolom 3 de laatste fractie van 25% krijgt
• Het is bijzonder handig om ENKEL in je grid-CSS de hoogtes en breedtes te bepalen, en NIET in de CSS van je betreffende grid-items. Als je dit wel doet, dan kunnen die met elkaar overhoop gaan liggen en wordt je code snel onoverzichtelijk
• Wat wel handig is wanneer je begint: geef elk grid-item een eigen achtergrond kleur; zo zie je heel snel of je grid goed in elkaar steekt en naar wens werkt
• Meer info en voorbeelden zijn te vinden op de site van W3Schools.

 

Over deze site        Site map        Contact