CSS Grid Generator

Visuele CSS Grid bouwer.

Presets:

Kolommen (3)

Rijen (2)

Kolom gap: 16pxRij gap: 16px

UitlijnenUitlijnen

Voorbeeld

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.grid-item {
  padding: 16px;
  background: #e2e8f0;
  border-radius: 8px;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

Gratis CSS Grid Generator

Bouw CSS Grid layouts visueel.

Referentie

Eigenschap	Beschrijving	Voorbeeld
grid-template-columns	Kolommen	1fr 1fr 1fr
grid-template-rows	Rijen	auto 1fr auto
gap	Afstand	16px
justify-items	Horizontaal	stretch
align-items	Verticaal	stretch

FAQ

Wat is CSS Grid?

CSS Grid is een tweedimensionaal layout systeem.

Grid vs Flexbox?

Grid is 2D, Flexbox is 1D.

Wat betekent "fr"?

"fr" staat voor een fractie van de beschikbare ruimte.

Browser ondersteuning?

Ja, alle moderne browsers.

Grid en Flexbox samen?

Ja, ze vullen elkaar aan.

Gerelateerde tools

CSS Flexbox Generator CSS Gradient Generator CSS Shadow Generator Em/Px Converter

𝕏 Twitter in LinkedIn

💬 User Feedback

Beoordeel deze tool

3.6 / 5 · 47 beoordelingen

More Tools

📐CSS Flexbox Generator 🌈CSS Gradient Generator 📐Em/Px Converter

Blijf op de hoogte

Ontvang wekelijkse dev-tips en nieuwe tools.

Geen spam. Altijd opzegbaar.

Enjoy these free tools?

☕Buy Me a Coffee

How to Use

Enter or paste your data in the input field
Configure any options if available
Click the action button to process
Copy the result to your clipboard

Use Cases

Development and debugging workflows
Data format conversion
Code generation and formatting
Quick calculations and validation

FAQ

Is this Css Grid Generator tool free to use?

Yes, the Css Grid Generator tool is completely free. No registration or payment required.

Is my data secure?

Absolutely. All processing happens client-side in your browser. Your data never leaves your device or is sent to any server.

What formats does the Css Grid Generator tool support?

The tool supports all standard formats for CSS styling and formatting. Check the tool interface for specific format options.