Een CSS Grid Layout is een krachtige tool in CSS waarmee je complexe, responsieve webpagina-layouts kunt maken.
Het is een twee-dimensionaal raster-gebaseerd systeem, waarbij je elementen kunt plaatsen in rijen en kolommen. Dit maakt het makkelijker voor jou als webdesigner om ingewikkelde layouts te ontwerpen zonder afhankelijk te zijn van floats of positioning hacks in je CSS stylesheet.
CSS Grid Layout voorbeeld
Stel dat je een eenvoudige layout met drie kolommen en twee rijen wilt maken. Hier is hoe je dat kunt doen met CSS Grid:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
gap: 10px; }
.grid-item{
background-color: #8cacea;
padding: 20px;
text-align: center;
border: 1px solid #000; }
1
2
3
4
5
6
Uitleg CSS Grid Layout
- Grid Container: De .grid-container class gebruikt display: grid; om de grid layout te activeren.
- Grid Template Columns en Rows: grid-template-columns: repeat(3, 1fr); maakt drie kolommen die elk een gelijke breedte hebben. grid-template-rows: 100px 100px; maakt twee rijen van elk 100px hoog.
- Gap: gap: 10px; zorgt voor een ruimte van 10px tussen de grid items.
- Grid Items: Elke .grid-item is een item binnen de grid container en wordt automatisch geplaatst in de volgende beschikbare cel.