Gridrijen en automatische plaatsing

Wanneer je items in een raster plaatst, maakt CSS Grid op twee manieren rijen aan: expliciet (je definieert ze met grid-rows-*) of impliciet (de browser genereert ze automatisch wanneer items buiten het raster lopen). Als je dit onderscheid begrijpt, kun je hoogtes nauwkeurig instellen wanneer dat nodig is, of de browser het laten afhandelen wanneer je inhoud een variabele grootte heeft.

Tailwind biedt grid-rows-1 tot en met grid-rows-6 om expliciete rijsporen te definiëren. Onder de motorkap wordt grid-rows-3 gecompileerd naar grid-template-rows: repeat(3, minmax(0, 1fr)). Deze rijen verdelen de beschikbare hoogte van de container gelijk. Dit is vooral nuttig wanneer de container een vaste hoogte of een hoogte op basis van een percentage heeft.

Wanneer er meer items zijn dan je expliciete rijen kunnen bevatten, maakt de browser impliciete rijen aan. Standaard krijgen deze impliciete rijen een hoogte die bij hun inhoud past. Je kunt hun hoogte beheren met aangepaste CSS of de syntaxis voor willekeurige waarden van Tailwind. Je kunt bijvoorbeeld de rijhoogte instellen via een inline stijl of de hulpprogramma's auto-rows-* gebruiken, die in nieuwere versies van Tailwind beschikbaar zijn.

De eigenschap grid-flow bepaalt het algoritme voor automatische plaatsing: de volgorde waarin items beschikbare rastercellen vullen. Tailwinds grid-flow-row (de standaardwaarde) vult elke rij van links naar rechts voordat het naar beneden gaat. grid-flow-col vult elke kolom van boven naar beneden voordat het naar rechts gaat. Dit lijkt op het verschil tussen een boek van links naar rechts lezen en een krant kolom voor kolom lezen.

Met grid-flow-col verandert het algoritme voor automatische plaatsing, zodat kolommen eerst worden gevuld. In combinatie met grid-rows-* om te beperken hoe hoog elke kolom kan worden, ontstaat een verticale stroom van kaarten in kranten- of Pinterest-stijl. Items worden in de eerste kolom naar beneden geplaatst en lopen daarna automatisch over naar de volgende kolom.

grid-flow-dense activeert het algoritme voor dicht inpakken, waarmee de browser gaten kan opvullen die grote items met meerdere sporen achterlaten. Zonder dicht inpakken laat een raster met items die meerdere sporen beslaan gaten open, omdat de plaatsing strikt geordend is. Dicht inpakken is ideaal voor afbeeldingsgalerijen waarin je een compact mozaïek zonder verspilde ruimte wilt.

Je kunt de stroomrichting en dichtheid combineren met grid-flow-row-dense of grid-flow-col-dense. De variant row-dense vult eerst rijen en vult daarna eventuele gaten op, terwijl col-dense eerst kolommen vult en daarna gaten opvult. Dit zijn de aangewezen hulpprogramma's voor indelingen in galerijstijl met kaarten van verschillende afmetingen, wanneer uitstraling belangrijker is dan een strikt vaste volgorde.

Als je zowel grid-rows-* als grid-cols-* definieert, krijg je een volledig gespecificeerd raster, vergelijkbaar met een spreadsheet. Elke cel in dit raster heeft een voorspelbare positie. Deze aanpak werkt uitstekend voor dashboardindelingen waarbij je precies weet hoeveel onderdelen je nodig hebt en nauwkeurige controle wilt over hun hoogte en breedte.

Met de syntaxis voor willekeurige waarden van Tailwind kunt je elke CSS-waarde tussen vierkante haken schrijven. Voor rasterrijen kun je grid-rows-[100px_1fr_auto] gebruiken om een vaste koptekst van 100 px, een flexibel inhoudsgebied en een voettekst met automatische hoogte te definiëren. Dit is beknopter dan inline stijlen schrijven en profiteert van JIT-compilatie naar je productie-CSS.

Bij het bouwen van rasters met kaarten en dynamische inhoud wil je vaak uniforme minimale rijhoogten, zodat korte kaarten niet in het niet vallen. Met grid-auto-rows via een inline stijl of Tailwinds willekeurige JIT-variant [grid-auto-rows:200px] zorg je ervoor dat elke rij minstens zo hoog is als nodig. Zo voorkom je storende hoogteverschillen in lijsten die door gegevens worden aangestuurd.

Hier komt alles samen in een volledige applicatiestructuur die CSS Grid gebruikt voor de buitenste indeling. De grid-rows definiëren de hoogten van koptekst, inhoud en voettekst. Binnen de inhoudsrij verdeelt een genest patroon, grid-cols-[sidebar_main], het scherm. Deze aanpak is overzichtelijk en voorspelbaar en vereist geen absolute positionering of flexboxtrucs voor de structuur op het hoogste niveau.

In deze les heb je geleerd: grid-rows-* definieert expliciete rijsporen met gelijke hoogten, grid-flow-row en grid-flow-col bepalen de plaatsingsrichting en grid-flow-dense vult gaten op die door items met overspanning zijn achtergelaten. Hierna bekijken we hulpprogramma's voor tussenruimte en uitlijning binnen rastercontainers.