Een bereik met minmax vastleggen

De CSS-functie minmax geeft voor een gridspoor een minimum en maximum op. In een kolombeschrijving kun je bijvoorbeeld een ondergrens van nul combineren met een aandeel van de vrije ruimte. Dat is iets anders dan iedere kolom een vaste breedte geven.

Het bekende minmax(0, 1fr) kan voorkomen dat de automatische minimumgrootte de kolom breder houdt dan bedoeld. De inhoud zelf kan nog steeds overlopen. Zorg dus ook dat lange tekst of een breed element op een bruikbare manier wordt behandeld. Een technische mogelijkheid om iets smaller te maken is geen reden om tekst onleesbaar te laten worden. Test de indeling met echte inhoud.

Voorbeeld

.rooster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

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