Flexbox- en grid-playground

Zo gebruik je de flexbox- en grid-playground

1. Kies een Lay-out: Flexbox of Grid, of begin met een van de Voorinstellingen (Gecentreerd, Navigatiebalk, Kaarten die doorlopen, Zijbalk, Responsief kaartenraster, Holy grail, 12 kolommen).
2. Stel de eigenschappen van de Container in. Voor flexbox: flex-direction en flex-wrap. Voor grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items en grid-template-areas. Beide delen justify-content, align-items, align-content, row-gap (px) en column-gap (px).
3. Beheer de Items met Item toevoegen, Geselecteerd item verwijderen en Geselecteerd item resetten. Klik op een item in het voorbeeld (of ga er met Tab naartoe en druk op Enter) om het te selecteren.
4. Bewerk het geselecteerde item: order en align-self in beide modi, flex-grow, flex-shrink en flex-basis voor flexbox, en grid-area, grid-column, grid-row en justify-self voor grid.
5. Kopieer de CSS-code en de bijbehorende HTML-code met hun knoppen Kopiëren.

Elk bedieningselement is een gewoon formulierveld, dus de hele playground werkt ook alleen met het toetsenbord. De CSS bevat alleen de eigenschappen die je ten opzichte van de standaardwaarden hebt gewijzigd, zodat ze kort blijft, en items met identieke instellingen delen één regel (.item als ze allemaal gelijk zijn).

Flexbox in het kort

Flexbox zet items langs één as. flex-direction bepaalt de hoofdas (een rij of een kolom); justify-content verdeelt de items erlangs (center, space-between…), en align-items plaatst ze op de dwarsas. Met flex-wrap: wrap gaan items die niet passen naar een nieuwe regel, en align-content verdeelt dan de ruimte tussen die regels.

Elk item heeft drie eigenschappen voor de grootte, meestal samen geschreven als flex:

• flex-basis: de begingrootte (auto gebruikt de inhoud of de width);
• flex-grow: hoeveel van de vrije ruimte het item inneemt (0 = niets, 1 = een gelijk deel);
• flex-shrink: hoeveel het inlevert als er te weinig ruimte is (0 = krimpt nooit).

De voorinstelling Zijbalk toont het klassieke patroon: een zijbalk met flex-basis: 200px en flex-shrink: 0, en een hoofdgedeelte met flex-grow: 1.

CSS Grid in het kort

Grid zet items in twee dimensies. grid-template-columns: repeat(3, 1fr) maakt drie gelijke kolommen; fr is een deel van de vrije ruimte. repeat(auto-fill, minmax(120px, 1fr)) maakt zoveel kolommen van minstens 120px als er passen, wat een responsief kaartenraster oplevert zonder één media query.

Items vullen de cellen op volgorde, tenzij je ze plaatst: grid-column: span 2 maakt een item twee kolommen breed, en grid-column: 1 / -1 rekt het uit over de hele rij.

Met grid-template-areas teken je de lay-out met namen. Typ één rij per regel, bijvoorbeeld header header en dan nav main, en geef items grid-area: header of grid-area: main. Een punt staat voor een lege cel. Elke rij moet hetzelfde aantal cellen hebben en elke naam moet een rechthoek vormen; anders waarschuwt de tool je.