Grid-kolommen beschrijven

Met grid-template-columns beschrijf je de expliciete kolommen van een grid. De eenheid fr verdeelt een aandeel van de beschikbare ruimte. Ze betekent niet dat iedere kolom onder alle omstandigheden exact dezelfde zichtbare breedte krijgt.

De minimale ruimte die inhoud nodig heeft kan invloed hebben op de verdeling. Twee kolommen met 1fr zijn een bruikbaar begin, maar test ook lange tekst en brede onderdelen. Gebruik niet voor elke schermbreedte zomaar een extra vaste pixelmaat. Denk eerst na over de minimale bruikbare breedte van de inhoud. minmax kan daarbij helpen, maar lost een onleesbaar ontwerp niet op zonder inhoudelijke afweging.

Voorbeeld

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

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

Verder binnen dit onderwerp: Een bereik met minmax vastleggen.