Salt la conținutul principal
LibraTool logoLibraTool

Generator CSS Grid — gratuit

Proiectați vizual un CSS grid — tracks, unități și spații — și copiați CSS și HTML generat.

Funcționează offline odată încărcat
Presetări
Coloane (3)
Rânduri (2)
Previzualizare în direct
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>

🔒 Totul rulează în browser — nimic nu este încărcat.

Cum funcționează

Proiectează vizual o grilă CSS: adaugă până la 8 coloane și 8 rânduri, setează fiecare traseu la fr, px, auto sau min/max-content și ajustează spațiile dintre rânduri/coloane. Previzualizarea live numerotată se actualizează instant, iar CSS-ul grid-template generat plus HTML-ul corespunzător sunt la un clic distanță de clipboard-ul tău.

  1. 1
    Modelează grila
    Adaugă/elimină coloane și rânduri cu + și −.
  2. 2
    Setează traseele
    Fiecare coloană și rând primește propria unitate (1fr, 100px, auto…).
  3. 3
    Acordează spațiile
    Cursoare separate pentru row-gap și column-gap.
  4. 4
    Copiază codul
    CSS gata de producție și scheletul HTML corespunzător.

Totul rulează în browser-ul tău — nimic nu este încărcat.

Instrumente similare

↔️

Generator CSS Flexbox

Experimentați cu direcție flex, înfășurare, justificare și aliniere pe elemente în direct — și copiați CSS-ul.

Încearcă
📐

Generator CSS clamp()

Generează o valoare CSS clamp() fluidă pentru tipografie și spațiere responsive. Setează dimensiunea min/max și intervalul de viewport, vizualizează o previzualizare live și copiază CSS-ul pe o singură linie.

Încearcă
📓

Hârtie imprimabilă — Liniată, milimetrică, cu puncte și pentru muzică (PDF)

Imprimă-ți propria hârtie: liniată (dictando sau „college ruled”), milimetrică, cu puncte, izometrică, pentru exerciții de scris de mână, portativ muzical sau notițe Cornell, în A4, Letter, A5 sau Legal, în orice culoare a liniilor, cu câte pagini ai nevoie. Un PDF vectorial clar, creat în browser.

Încearcă

Întrebări frecvente