Vés al contingut principal
LibraTool logoLibraTool

Generador de CSS Grid de franc

Dissenya visualment una CSS grid — pistes, unitats i buits — i copia el CSS i HTML generat.

Funciona sense connexió un cop carregat
Predefinits
Columnes (3)
Files (2)
Previsualització en viu
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>

🔒 Tot funciona al teu navegador — res s'envia.

Com funciona

Dissenya una graella CSS visualment: afegeix fins a 8 columnes i 8 files, estableix cada pista a fr, px, auto, o min/max-content, i ajusta els buits de fila/columna. La previsualització en directe numerada s'actualitza a l'instant i el CSS grid-template generat més l'HTML corresponent són a un clic del teu porta-retalls.

  1. 1
    Dona forma a la graella
    Afegeix/elimina columnes i files amb + i −.
  2. 2
    Estableix les pistes
    Cada columna i fila rep la seva pròpia unitat (1fr, 100px, auto…).
  3. 3
    Ajusta els buits
    Controls lliscants separats per al buit de fila i el buit de columna.
  4. 4
    Copia el codi
    CSS a punt per a producció i l'esquelet HTML corresponent.

Tot s'executa al teu navegador — res es puja.

Eines relacionades

↔️

Generador de CSS Flexbox

Experimenta amb direcció flex, wrap, justify i align en elements en viu — i copia el CSS.

Prova-ho
📐

Generador de clamp() CSS

Genera un valor clamp() CSS fluid per a tipografia i espaiat responsius. Estableix les mides mínima/màxima i el rang de viewport, veu una previsualització en viu i copia el CSS d'una sola línia.

Prova-ho
📓

Paper imprimible — Paper pautat, quadriculat, de punts i de música (PDF)

Imprimeix el teu propi paper: pautat (de línia ampla o «college ruled»), quadriculat, de punts, isomètric, de pràctica d’escriptura, de pentagrama o de notes Cornell, en A4, Letter, A5 o Legal, de qualsevol color de línia i amb les pàgines que necessitis. Un PDF vectorial nítid fet al navegador.

Prova-ho

Preguntes freqüents