Softonic

CSS Grid-generator

Stap 1 / 3
Volgende

CSS Grid is de standaardmanier om 2D-layouts te bouwen, maar de containersyntax is snel vergeten. Deze generator schrijft de containerregels voor u: een vast aantal kolommen van gelijke breedte, de afstand tussen de tracks en een mediaquery die onder een minimumbreedte overschakelt naar auto-fit-kolommen, zodat de layout op kleine schermen leesbaar blijft. Het resultaat is pure container-CSS; het plaatsen van items doet u zelf in uw eigen stylesheet.

Zo bouwt u een grid

  1. 1

    Stel het aantal kolommen in

    Tussen 1 en 12 tracks van gelijke breedte.

  2. 2

    Stel de minimumkolombreedte in

    Onder deze breedte schakelt het grid over naar auto-fit, zodat elke kolom een bruikbare minimumomvang houdt.

  3. 3

    Stel de afstand in

    De ruimte tussen kolommen en rijen.

  4. 4

    Genereer de CSS

    De tool schrijft de containerregels plus de responsieve fallback.

  5. 5

    Kopieer de code

    Plak de containerregels in uw stylesheet en plaats items met uw eigen `grid-column`- / `grid-row`-regels.

De gegenereerde container

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
  • repeat(3, minmax(0, 1fr)): drie kolommen die de beschikbare breedte gelijk verdelen. 1fr is een deel van de resterende ruimte; minmax(0, 1fr) laat kolommen kleiner worden dan hun inhoud.
  • gap: de afstand tussen elke track.
  • De mediaquery schakelt over naar repeat(auto-fit, minmax(220px, 1fr)), wat zoveel kolommen maakt als er passen, elk minimaal 220px breed. Het breekpunt is het aantal kolommen maal de minimumbreedte (met een minimum van 120px), zodat het grid op kleine schermen doorloopt in plaats van te knijpen.

De eenheid fr

fr betekent “een deel van de resterende ruimte”: nadat de tracks met een vast formaat zijn afgetrokken, wordt de resterende ruimte gedeeld door het totale aantal fr-eenheden.

grid-template-columns: 200px 1fr 2fr;

Op een container van 1000px neemt de eerste kolom 200px en de resterende 800px delen zich 1:2, dus 267px en 533px.

auto-fill vs. auto-fit

  • auto-fill: maakt lege opvultracks wanneer er niet genoeg items zijn.
  • auto-fit: klapt lege tracks in tot nul, zodat de overgebleven items de rij vullen.

De responsieve fallback gebruikt auto-fit, precies wat kaartgrids willen: de rij ziet er altijd vol uit.

Kolommen van verschillende breedte

De generator levert gelijke kolommen. Bewerk het resultaat om formaten te mengen: grid-template-columns: 200px 1fr 2fr; geeft een vaste zijbalk en twee flexibele kolommen in een verhouding 1:2. Voor benoemde gebieden (grid-template-areas) of expliciete plaatsing (grid-column: 1 / 3) voegt u die regels handmatig toe bovenop de gegenereerde container.

Grid vs. Flexbox

  • Grid: expliciete 2D-layout met tracks. Goed wanneer de layout een rij- en kolomstructuur heeft (paginaskelet, galerij, dashboard).
  • Flexbox: 1D-uitlijning langs één as. Goed wanneer items vanzelf doorlopen (navigatiebalk, rij knoppen).

Echte layouts combineren meestal beide: Grid voor het paginaskelet, Flexbox binnen componenten.

Veelgemaakte fouten

  • min-width: 0 op kinderen vergeten: griditems gebruiken standaard de minimumbreedte van hun inhoud, waardoor fr-kolommen niet kleiner kunnen dan het langste woord. Zet min-width: 0 op de kinderen zodat ze kunnen krimpen.
  • Nesten zonder display: grid: een gridkind is zelf geen grid, tenzij u het declareert.

Veelgestelde vragen

Het beschermt de layout op kleine schermen. De gegenereerde mediaquery schakelt over naar repeat(auto-fit, minmax(breedte, 1fr)), dus elke kolom houdt minimaal die breedte en het grid maakt meer rijen in plaats van de kolommen te knijpen.

De generator levert gelijke kolommen. Bewerk de regel grid-template-columns in het resultaat om formaten te mengen, bijvoorbeeld 1fr 2fr 1fr voor een brede middelste kolom, of 200px 1fr voor een vaste zijbalk.

Meestal omdat het item de standaard min-width: auto heeft, die gelijk is aan de minimumbreedte van de inhoud. Zet min-width: 0 op het griditem zodat het in zijn cel kan krimpen.

Grid wanneer de layout een rij- en kolomstructuur heeft (een paginalayout, een fotogalerij, een dashboard). Flexbox wanneer items langs één as doorlopen (een navigatiebalk, een rij knoppen, een stapel formuliervelden).

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

HAR-bestandsviewer

Open HAR-netwerkopnamen lokaal, filter verzoeken, bekijk gemaskeerde headers en timing en exporteer opgeschoonde samenvattingen zonder upload.

ASCII naar binair-converter

Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

Tool beschikbaar in andere talen