Welke browserondersteuning kan ik verwachten?

CSS Grid wordt ondersteund door alle moderne browsers (Chrome, Firefox, Safari en Edge). Deze generator produceert standaard syntax die compatibel is zonder de noodzaak voor complexe polyfills.

Wat zijn fractionele eenheden (fr)?

De `fr` eenheid vertegenwoordigt een fractie van de beschikbare ruimte in de grid-container. Het gebruik van `1fr` voor meerdere kolommen zorgt ervoor dat ze de resterende ruimte gelijkelijk verdelen nadat rekening is gehouden met 'fixed-width' tracks.

Worden mijn lay-outgegevens opgeslagen op een server?

Nee. De generator draait volledig in uw browser en uw lay-outconfiguratie verlaat uw machine nooit. U kunt de code direct naar uw klembord kopiëren voor gebruik in uw project.

Wat is het verschil tussen tracks en gaps?

Tracks zijn de daadwerkelijke kolommen en rijen die inhoud bevatten, terwijl gaps (goten) de lege ruimte tussen die tracks definiëren. U kunt de `grid-gap` aanpassen om de afstand te regelen zonder de trackgrootte te beïnvloeden.

Kleur & Ontwerp

CSS Grid Layout Generator

Drag track sizers, copy the CSS Grid.

Runs in your browser

Columns3Rows2Gap12px

Column tracks

Row tracks

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 80px 80px;
  gap: 12px;
}

Redactionele opmerking

Understanding · The first real layout system the web has had.

Dit uitgebreide hoofdstuk is momenteel alleen in het Engels beschikbaar. De conversietool hierboven werkt in jouw taal; de lange uitleg is nog niet vertaald.

Veelgestelde vragen

Quick answers.

›What browser support can I expect?

CSS Grid is supported by all modern browsers (Chrome, Firefox, Safari, and Edge). This generator produces standard syntax that is compatible without the need for complex polyfills.

›What are fractional units (fr)?

The `fr` unit represents a fraction of the available space in the grid container. Using `1fr` for multiple columns ensures they share the remaining space equally after fixed-width tracks are accounted for.

›Is my layout data saved to a server?

No. The generator runs completely in your browser and your layout configuration never leaves your machine. You can copy the code directly to your clipboard for use in your project.

›What is the difference between tracks and gaps?

Tracks are the actual columns and rows that hold content, while gaps (gutters) define the empty space between those tracks. You can adjust the `grid-gap` to control spacing without affecting track sizing.

Mensen zoeken ook naar

Gerelateerde tools

More in this room.

Bekijk alles in Kleur & Ontwerp