Introductie tot CSS Grid

Wat is CSS Grid? 

 CSS Grid Layout, vaak gewoon Grid genoemd, is een tweedimensionaal grid-systeem dat je in staat stelt om elementen zowel in de rij- als in de kolomrichting te plaatsen. Het is ontworpen om complexe weblayouts eenvoudiger te maken. 

 

 Waarom CSS Grid Gebruiken? 

 

 Tweedimensionale Controle : In tegenstelling tot Flexbox, dat voornamelijk eendimensionaal is (rij of kolom), kun je met Grid zowel rijen als kolommen tegelijk beheren. 

 Complexe Layouts : Creëer geavanceerde en responsieve layouts met minder code. 

 Flexibiliteit : Pas de layout aan op basis van de inhoud en beschikbare ruimte. 

 

 Basisconcepten 

 

 Grid Container : Het element dat display: grid; krijgt. 

 Grid Items : De directe kinderen van de grid container. 

 Grid Lines : De lijnen die de rijen en kolommen scheiden. 

 Grid Tracks : De rijen en kolommen zelf. 

 Grid Cells : De ruimtes tussen de lijnen, vergelijkbaar met cellen in een tabel. 

 

 Opzetten van een Grid Container 

 .container {

 display: grid;

}