Kolommen en rijen overspannen

Standaard neemt elk onderliggend element van een CSS Grid-container precies één kolom en één rij in beslag. Met beslaan kan één rasteritem zich over meerdere kolommen of rijen uitstrekken, zodat je asymmetrische indelingen in tijdschriftstijl kunt maken. Tailwind biedt de hulpprogramma's col-span-* en row-span-*, die rechtstreeks worden vertaald naar grid-column: span N en grid-row: span N in CSS.

Tailwind bevat col-span-1 tot en met col-span-12, evenals col-span-full, dat alle beschikbare kolommen beslaat. Pas deze hulpprogramma's toe op een onderliggend element van het raster, niet op de container. In een raster met 12 kolommen geeft col-span-8 je bijvoorbeeld een hoofdgedeelte voor de inhoud, terwijl de overige 4 kolommen ruimte bieden aan een zijbalk. Dit is een veelgebruikt patroon met twee panelen.

Met de klasse col-span-full laat je een element alle kolommen in het raster beslaan. Dit komt overeen met grid-column: 1 / -1. De klasse is ideaal voor banners over de volledige breedte, sectietitels of scheidingslijnen die buiten een raster met kaarten moeten uitsteken zonder de rasterdefinitie te wijzigen. Het element beslaat altijd het huidige aantal kolommen, ook als je dat aantal responsief wijzigt.

row-span-* werkt net als het beslaan van kolommen, maar dan op de verticale as. Een element met row-span-2 neemt twee rijsporen in beslag, waardoor het hoger is dan de aangrenzende elementen. Dit is ideaal voor afbeeldingen met functies of prominente kaarten in een raster in bento-stijl, waarin één opvallend item naast meerdere kleinere items staat.

Je kunt col-span-* en row-span-* op hetzelfde element combineren om een grote functiecel te maken. Dit vormt de basis voor indelingen in bento- en mozaïekstijl. Een cel met een prominente afbeelding die col-span-2 row-span-2 beslaat, vult bijvoorbeeld een gebied van 2×2, terwijl de omliggende cellen er automatisch omheen worden geplaatst.

Naast het beslaan kun je precies bepalen waar een item begint met de hulpprogramma's col-start-* en col-end-*. col-start-2 plaatst de linkerrand van het item op de tweede rasterlijn en col-end-5 laat het eindigen op de vijfde. Met deze gedetailleerde controle kun je bewust kolommen overslaan om witruimte in je indeling te creëren.

Op dezelfde manier bepalen row-start-* en row-end-* de verticale plaatsing expliciet. Deze zijn vooral nuttig wanneer je de automatische plaatsing wilt overschrijven om specifieke items in exacte rastergebieden te plaatsen. In combinatie met col-start en col-end kun je elementen effectief vastzetten in een specifiek rastergebied.

Combineer responsieve voorvoegsels met hulpprogramma's voor beslaan om indelingen te maken die tussen breekpunten sterk veranderen. Een item kan op mobiele apparaten alle kolommen beslaan zodat het leesbaar blijft en op desktops veranderen in een smalle zijbalk. Het patroon col-span-full md:col-span-4 lg:col-span-3 doet precies dat: volledige breedte op mobiele apparaten en smaller op grotere schermen.

Als een onderliggend element zowel col-start-* als col-span-* heeft en deze niet binnen de rastergrenzen passen, verplaatst de browser het naar de volgende rij. Gebruik col-auto om de browser expliciet de startpositie te laten kiezen. Hiermee wordt elke overgenomen expliciete plaatsing teruggezet naar automatisch. Dit is handig wanneer je alleen het aantal te beslaan kolommen wilt bepalen, niet de startpositie.

Een klassieke blogindeling heeft een breed hoofdgedeelte voor het bericht en een smalle zijbalk. Met een basisraster van 12 kolommen, col-span-8 voor het artikel en col-span-4 voor de zijbalk krijg je een verhouding van 2:1. Voeg col-span-12 toe voor een voettekstrij over de volledige breedte en de structuur is compleet, allemaal zonder aangepaste CSS.

Hier zie je een raster met kaarten in tijdschriftstijl waarin kolommen en rijen worden gecombineerd. Een grote kaart met een functie beslaat col-span-2 row-span-2, twee hoge kaarten aan de zijkant gebruiken elk row-span-1 en een banner over de volledige breedte gebruikt col-span-full. Door deze hulpprogramma's te combineren maak je redactionele indelingen waarvoor vroeger complexe CSS met benoemde rastergebieden nodig was.

In deze les heb je geleerd dat col-span-* en row-span-* rasteritems over meerdere sporen laten uitstrekken, dat col-start-* en col-end-* een nauwkeurige expliciete plaatsing mogelijk maken en dat col-span-full altijd elke kolom beslaat, ongeacht het aantal kolommen. Hierna bekijken we hoe je expliciete rasterrijen definieert en het gedrag van automatische plaatsing beheerst.