Als het goed is, heb je een pagina waar drie elementen binnen main zitten: één article en twee aside. Voeg nieuwe CSS classes toe aan main met de drie elementen erin:
Hiermee vervang je de opmaak van de main container, maar je kunt dit met elke soort container doen, zoals div of article en zelfs body. De techniek die je gebruikt heet CSS grid (= rooster).

Zet de display eigenschap van grid in de algemene container.

Wat denk je dat de grid-column-gap (= kolommen ruimte) en grid-row-gap (= rijen ruimte) eigenschappen doen?

Nu benoem je een grid-area (= gebied) voor elk element:

En nu ga je je opmaak ontwerpen! We plaatsen de twee aside elementen naast elkaar onderaan. Hiervoor heb je twee kolommen van gelijke breedte nodig. Je kunt de row (= rij/regel) hoogte op automatisch laten staan. Zet de volgende code binnen de .attPageLayoutGrid CSS regels:

fr betekent fraction (= fractie, gedeelte). Je kunt px gebruiken voor exacte afmetingen in plaats van relatieve. Zie je hoe article de hele ruimte over twee kolommen benut?

Probeer de aside elementen rechts te zetten, waarbij ze de helft van de breedte van article zijn. Verander de waarde van grid-template-columns en grid-template-areas naar:

Als je niet wilt dat de aside elementen helemaal naar beneden uitgerekt worden, kun je een blanco spatie gebruiken met behulp van een punt:

Zo ziet de opmaak eruit bij elk van de drie voorbeelden:

Met CSS grid kun je bijna elke opmaak maken die jij wilt. In dit voorbeeld hebben we header en footer eruit gelaten, maar ook deze kunnen binnen grid vallen. Als je meer over CSS grid wilt leren, kijk dan op https://css-tricks.com/snippets/css/complete-guide-grid/