Auto-fit, Auto-fill & Subgrid: Responsieve Galerijen Beheersen

Auto-fill: Lege Sporen Toestaan

Auto-fill vult je grid met zoveel kolommen als passen. Maar hier’s het cruciale detail: het voegt lege sporen toe als er niet genoeg items zijn.

Stel je hebt 3 items in een gallerij die plaats biedt aan 4 kolommen. Auto-fill voegt een vierde (lege) kolom toe. Dit kan grappig uitzien. Je items blijven aan de linkerkant, rechts is veel leegte.

De CSS ziet er zo uit:

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

Dit maakt kolommen van minimaal 250px. Ze groeien naar 1fr (gelijke ruimte). Je krijgt automatisch zoveel kolommen als passen.

Auto-fit: Kolommen Samenvoegen

Auto-fit doet iets slimmers. Het voegt geen lege kolommen toe. In plaats daarvan voegt het bestaande kolommen samen .

Dezelfde 3 items? Met auto-fit vullen ze de beschikbare ruimte. Ze groeien mee. Je hebt geen rij vol leegte.

De code:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Het ziet er hetzelfde uit. Maar het gedrag is totaal anders. Auto-fit is meestal wat je wilt. Het zorgt voor een netter uiterlijk.

Dit is de basis. Nu wordt het interessanter met subgrid.

Subgrid: Geneste Grids Uitlijnen

Hier wordt het echt krachtig. Stel je hebt een grid met kaarten. Elke kaart heeft een titel, afbeelding, en beschrijving. Je wilt dat alle titels even hoog zijn. Alle afbeeldingen ook. Dit is waar subgrid helpt.

Subgrid laat je zeggen: “Deze geneste grid erft de kolommen van zijn ouder.” Niet alle kolommen. Alleen de ouder-kolommen.

Voorbeeld:

.card {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 1;
}

Dit werkt nu in alle moderne browsers. Chrome, Firefox, Safari — allemaal support. IE doet het niet, maar wie maakt zich daar nog druk om?