Rijen en kolommen met grid

CSS Grid legt een tweedimensionale indeling vast. Je kunt kolommen en rijen definiëren en de directe kinderen van de container daarin laten plaatsen. De container krijgt display: grid; zonder verdere instellingen ontstaat niet vanzelf de kolomverdeling die je in gedachten hebt.

Werk eerst met een klein aantal onderdelen en bepaal welke kolommen je nodig hebt. Laat de inhoud de hoogte bepalen als er geen goede reden is om vaste rijhoogtes af te dwingen. Lange woorden of brede inhoud kunnen meer ruimte vragen dan verwacht. Test daarom niet alleen korte voorbeeldlabels. Houd de HTML-volgorde logisch, ook wanneer je de visuele positie later wijzigt.

Voorbeeld

.rooster { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

Naslag: MDN Web Docs over dit onderdeel. De uitleg hierboven is zelfstandig geformuleerd.

Verder binnen dit onderwerp: Grid-kolommen beschrijven.