Vai al contenuto principale
LibraTool logoLibraTool

Generatore CSS Grid gratis

Progetta visivamente una griglia CSS — tracce, unità e spazi — e copia il CSS e HTML generati.

Funziona offline una volta caricato
Predefiniti
Colonne (3)
Righe (2)
Anteprima dal vivo
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 Tutto viene eseguito nel tuo browser — nulla viene caricato.

Come funziona

Progetta una griglia CSS visivamente: aggiungi fino a 8 colonne e 8 righe, imposta ogni traccia a fr, px, auto o min/max-content, e regola gli spazi tra righe/colonne. L'anteprima dal vivo numerata si aggiorna istantaneamente e il CSS grid-template generato più l'HTML corrispondente sono a un clic dai tuoi appunti.

  1. 1
    Modella la griglia
    Aggiungi/rimuovi colonne e righe con + e −.
  2. 2
    Imposta le tracce
    Ogni colonna e riga ottiene la propria unità (1fr, 100px, auto…).
  3. 3
    Regola gli spazi
    Slider separati per row-gap e column-gap.
  4. 4
    Copia il codice
    CSS pronto per la produzione e lo scheletro HTML corrispondente.

Tutto funziona nel tuo browser — nulla viene caricato.

Strumenti correlati

↔️

Generatore CSS Flexbox

Sperimenta con direzione flex, wrap, justify e align su elementi dal vivo — e copia il CSS.

Prova
📐

Generatore CSS clamp()

Genera un valore CSS clamp() fluido per tipografia e spaziatura responsive. Imposta dimensioni minima/massima e intervallo di viewport, visualizza un'anteprima live e copia il CSS in un'unica riga.

Prova
📓

Carta stampabile — Righe, quadretti, punti, isometrica e pentagrammi (PDF)

Stampa la tua carta: a righe (larghe o strette), a quadretti, a punti, isometrica, per esercizi di scrittura, pentagrammi o appunti Cornell, in A4, Letter, A5 o Legal, con qualsiasi colore di linea e tutte le pagine che ti servono. Un PDF vettoriale nitido, creato nel browser.

Prova

Domande frequenti