CSS Flexbox & Grid Speeltuin

Wat is CSS Flexbox & Grid Speeltuin?

De CSS Flexbox & Grid Speeltuin is een gratis visuele sandbox om de twee belangrijkste CSS-lay-outmodellen te leren en te prototypen, gemaakt voor front-end-ontwikkelaars, studenten en ontwerpers. Kies Flex of Grid met de modusschakelaar en stel vervolgens de containereigenschappen in met eenvoudige dropdowns en numerieke velden: in de Flex-modus regel je flex-direction, flex-wrap, justify-content en align-items; in de Grid-modus geef je aan hoeveel kolommen en rijen (weergegeven als repeat(n, 1fr)) plus justify-items en align-items. Een gap-waarde en een aantal items gelden voor beide. Een live voorbeeld van genummerde tegels laat precies zien hoe je uitlijning en tussenruimte zich gedragen, en de volledige .container-CSS-regel wordt voor je gegenereerd om te kopiëren. Gebruik het wanneer je wilt zien hoe een flex- of grid-instelling er echt uitziet voordat je die in je project plakt.

CSS Flexbox & Grid Speeltuin gebruiken

1. Kies Flex of Grid met de modusschakelaar om te bepalen welk lay-outmodel je bouwt.
2. Stel in de Flex-modus flex-direction, flex-wrap, justify-content en align-items in via de dropdowns.
3. Stel in de Grid-modus het aantal kolommen en rijen in, plus justify-items en align-items.
4. Open de Instellingen om de gap (tussenruimte in px) en het aantal in het voorbeeld getoonde items te wijzigen.
5. Kijk hoe het tegelvoorbeeld zich herschikt terwijl je elke eigenschap wijzigt.
6. Kopieer de gegenereerde .container-CSS-regel en plak die in je stylesheet.

Voorbeelden

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

Veelgestelde vragen

Wat is hier het verschil tussen Flexbox en Grid?

De Flex-modus plaatst items langs één enkele as en biedt flex-direction, flex-wrap, justify-content en align-items. De Grid-modus rangschikt items in een tweedimensionaal raster met grid-template-columns en grid-template-rows (geschreven als repeat(n, 1fr)) samen met justify-items en align-items. Wissel van modus met de schakelaar om te vergelijken hoe elk model dezelfde uitlijning afhandelt.

Wat doet de gap-waarde?

De gap stelt via de CSS-eigenschap gap de ruimte in pixels in tussen elk item in zowel Flex- als Grid-lay-outs. Verhoog deze om de tegels uit elkaar te trekken of zet hem op 0 voor een aaneengesloten lay-out; het voorbeeld en de gegenereerde CSS worden beide direct bijgewerkt.

Waarom worden justify-content en align-items in Grid anders geschreven?

Grid gebruikt de trefwoorden start, end, center en stretch voor justify-items en align-items, terwijl Flex flex-start en flex-end gebruikt. De tool geeft de juiste trefwoorden voor de modus waarin je zit, zodat de gekopieerde CSS altijd geldig is.

Kan ik wijzigen hoeveel items er worden getoond?

Ja. Open de Instellingen en wijzig het aantal items om de genummerde voorbeeldtegels toe te voegen of te verwijderen (tot 24). Dit heeft alleen invloed op de demonstratie op het scherm; de gegenereerde CSS beschrijft de container, niet de items zelf.

Worden mijn gegevens ergens geüpload?

Nee. De speeltuin draait volledig in je browser met JavaScript, dus je instellingen en de gegenereerde CSS worden nooit naar een server gestuurd. Hij werkt privé en zelfs offline zodra de pagina is geladen.