# Bouw CSS-layouts door het gedrag te zien, niet door eigenschappen te onthouden
CSS Grid en Flexbox zijn krachtig omdat ze layoutrelaties beschrijven in plaats van vaste coördinaten. Het moeilijke is voorspellen hoe gap, justify-content, align-items, richting, omslaan, tracks en beschikbare ruimte samenwerken. Deze generator verandert abstracte eigenschappen in een live speeltuin met presets en realtime CSS. 5 Snelle layout-presets
Live CSS-update bij elke wijziging
0 Framework-afhankelijkheden in CSS
# Flexbox vs Grid: kies het model voor je de uitlijning verfijnt
Flexbox
Beste voor eendimensionale stromen waar items in een rij of kolom uitlijnen en natuurlijk omslaan.
- Navigatiebalken
- Knoppengroepen
- Omslaande cards
- Gecentreerde inhoud
CSS Grid
Beste voor tweedimensionale structuren waar rijen en kolommen de vorm van de compositie bepalen.
- Dashboards
- Galerijen
- Formulieren
- Redactionele secties
# Wat elke bediening je leert
| Bediening | CSS-eigenschap | Waar op te letten |
|---|---|---|
| Richting | flex-direction | Hoe de hoofdas stroomt - wissel van rij naar kolom om de hele logica te veranderen. |
| Omslaan | flex-wrap | Of items op één regel blijven of naar nieuwe regels omslaan bij ruimtegebrek. |
| Tussenruimte | gap | De ruimte tussen items zonder marges die aan randen breken. |
| Uitlijnen | justify-content | Hoe vrije ruimte wordt verdeeld langs de hoofdas. |
| Uitlijnen | align-items | Hoe items op de dwarsas zitten. |
| Inhoud uitlijnen | align-content | Hoe omgeslagen regels of grid-rijen extra dwarsruimte verdelen. |
| Kolommen | grid-template-columns | Hoeveel gelijke tracks het grid maakt voordat items naar de volgende rij omslaan. |
| Containergrootte | width en min-height | Hoe dezelfde CSS reageert bij veranderende beschikbare ruimte. |
Schaal eerst, optimaliseer daarna
Begin met het canvas te schalen naar een realistische grootte. Pas daarna tussenruimte en uitlijning aan. Zo werkt de gegenereerde CSS onder echte omstandigheden.# Schone CSS die je kunt aanpassen
.layout-playground {display: flex;flex-direction: row;flex-wrap: wrap;gap: 24px;justify-content: center;align-items: center;}
Waarom visueel schalen belangrijk is
Veel layoutbugs verschijnen alleen als de container smaller, hoger of anders gevuld is. Schalen terwijl de CSS live bijwerkt helpt bij het ontdekken van onhandig omslaan en fragiele uitlijningskeuzes.
Aanbevolen workflow
Kies een preset of Flexbox voor eendimensionale stromen en Grid voor tweedimensionale structuur.
Schaal het canvas voordat je CSS kopieert zodat de layout realistische beperkingen overleeft.
Gebruik gap voor tussenruimte in plaats van marges aan elk kind toe te voegen.
Kopieer de gegenereerde CSS als startpunt en voeg projectspecifieke selectors en media queries toe.