Generatore CSS Grid

Costruttore visuale CSS Grid.

Preset:

Colonne (3)

Righe (2)

Gap colonne: 16pxGap righe: 16px

GiustificaAllinea

Anteprima

CSS generato

.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 generato

<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>

Generatore CSS Grid gratuito

Costruisci layout CSS Grid visivamente.

Riferimento

Proprieta	Descrizione	Esempio
grid-template-columns	Definisce colonne	1fr 1fr 1fr
grid-template-rows	Definisce righe	auto 1fr auto
gap	Spaziatura	16px
justify-items	Allineamento orizzontale	stretch
align-items	Allineamento verticale	stretch

FAQ

Cos'e CSS Grid?

CSS Grid e un sistema di layout bidimensionale.

Grid vs Flexbox?

Grid e 2D, Flexbox e 1D.

Cosa significa "fr"?

"fr" rappresenta una frazione dello spazio disponibile.

Supporto browser?

Si, supportato da tutti i browser moderni.

Grid e Flexbox insieme?

Si, si completano perfettamente.

Strumenti correlati

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

𝕏 Twitter in LinkedIn

💬 User Feedback

Valuta questo strumento

3.6 / 5 · 47 valutazioni

Altri strumenti

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

Resta aggiornato

Ricevi consigli dev e nuovi strumenti ogni settimana.

Niente spam. Cancella quando vuoi.

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.