CSS Grid Generator

Build CSS Grid layouts visually.

grid-template-columns

grid-template-rows

column-gap

row-gap

justify-items

align-items

justify-content

Aantal items: 6

Voorbeeld

Gegenereerde CSS

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

Over deze tool

De CSS Grid Layout Generator laat u tweedimensionale grid-indelingen visueel ontwerpen door grid-template-columns, grid-template-rows, gap-eigenschappen en uitlijningsinstellingen aan te passen. De live-preview toont precies hoe uw grid eruitziet voordat u code schrijft.

CSS Grid is het krachtigste lay-outsysteem in CSS, ontworpen voor tweedimensionale indelingen (rijen EN kolommen tegelijkertijd). Het vult Flexbox aan, dat eendimensionale indelingen verwerkt.

Hoe te gebruiken

Stel grid-template-columns in voor de kolomstructuur. Gebruik de presetknopppen voor veelgebruikte patronen.
Stel optioneel grid-template-rows in (laat auto staan voor de meeste indelingen).
Pas column-gap en row-gap aan voor de tussenruimte.
Gebruik justify-items en align-items om itemplaatsing in cellen te beheren.
Verander het aantal items met de schuifregelaar om te zien hoe het grid reageert.
Klik op Kopiëren om de gegenereerde CSS te kopiëren.

Gebruiksscenario's

Front-end developers gebruiken CSS Grid voor pagina-indelingen, dashboardstructuren en afbeeldingsgalerijen. Ontwerpers exporteren grid-specificaties als exacte CSS om te delen met developers. Design system-teams gebruiken het voor het prototypen van spatiëring- en kolompatronen.

Veelgestelde vragen

Wat betekent 1fr? — fr is een fractionele eenheid. 1fr betekent één fractie van de beschikbare ruimte. repeat(3, 1fr) maakt drie gelijke kolommen.
Wanneer gebruik ik Grid versus Flexbox? — Gebruik Grid voor tweedimensionale indelingen (rijen en kolommen). Gebruik Flexbox bij het indelen van items in één richting.
Wordt CSS Grid door alle browsers ondersteund? — Ja. CSS Grid wordt volledig ondersteund in alle moderne browsers sinds 2017.