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, stel de containereigenschappen in en open de Instellingen om afzonderlijke kinderen te stylen: order, flex-grow, flex-shrink, flex-basis en align-self in de Flex-modus, of kolom-/rij-span en align-self in de Grid-modus. De Grid-modus biedt ook aangepaste trackgroottes — typ een willekeurige grid-template-columns/rows-waarde zoals 200px 1fr of repeat(auto-fit, minmax(120px, 1fr)) — en een visuele grid-template-areas-editor waarin je elke cel een naam geeft, wat ook benoemde rasterlijnen maakt. Een live voorbeeld van genummerde tegels weerspiegelt elke wijziging, en je kunt alleen de .container-regel of de container plus per-item-CSS exporteren.

CSS Flexbox & Grid Speeltuin gebruiken

1. Kies Flex of Grid met de modusschakelaar om te bepalen welk lay-outmodel je bouwt.
2. Stel de containereigenschappen in — flex-direction/wrap en justify/align, of het aantal kolommen en rijen met justify-items/align-items.
3. Open de Instellingen om de gap en het aantal items te wijzigen en om elk kind te stylen (order, flex-grow/shrink/basis, align-self of kolom-/rij-span).
4. Zet in Grid de trackgrootte op Aangepast om je eigen grid-template-columns/rows te typen — px, fr, minmax() of repeat(auto-fit/auto-fill, …).
5. Zet de grid-template-areas-editor aan en geef elke cel een naam om items per gebied te plaatsen.
6. Kies of je alleen de container-CSS of de container plus per-item-CSS exporteert en kopieer het resultaat.

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 · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

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

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

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

.container > :nth-child(2) {
  flex-grow: 1;
}

Veelgestelde vragen

Wat is hier het verschil tussen Flexbox en Grid?

De Flex-modus plaatst items langs één as en biedt flex-direction, flex-wrap, justify-content en align-items. De Grid-modus rangschikt ze in twee dimensies met grid-template-columns en grid-template-rows plus justify-items en align-items. Wissel van modus met de schakelaar om te vergelijken hoe elk dezelfde uitlijning afhandelt.

Hoe geef ik afzonderlijke items een stijl?

Open de Instellingen en gebruik de per-item-instellingen om order, flex-grow, flex-shrink, flex-basis en align-self (Flex) of kolom-/rij-span en align-self (Grid) per kind in te stellen. Zet Exporteren op 'Container + items' en de tool voegt voor elk aangepast item een .container > :nth-child(n)-regel toe.

Kan ik aangepaste trackgroottes zoals auto-fit of minmax() gebruiken?

Ja. Zet in de Grid-modus de trackgrootte op Aangepast en typ een geldige grid-template-columns/rows-waarde — pixels, fr-eenheden, minmax() of repeat(auto-fit/auto-fill, minmax(120px, 1fr)) voor responsieve kolommen. Het voorbeeld en de gegenereerde CSS werken tijdens het typen bij.

Wat doet de grid-template-areas-editor?

Zet hem aan in de Grid-modus en geef elke cel van het raster een naam; de tool stelt een grid-template-areas-declaratie samen en lege cellen worden een punt. Benoemde gebieden maken ook benoemde rasterlijnen, en je kunt een kind in een gebied plaatsen door de naam ervan in het grid-area-veld van dat item te typen.

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.