Saltar ao contido principal
LibraTool logoLibraTool

Xerador de Grid CSS de balde

Deseña visualmente unha grid CSS — pistas, unidades e espazos — e copia o CSS e HTML xerados.

Funciona sen conexión unha vez cargado
Preaxustes
Columnas (3)
Filas (2)
Vista previa en directo
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>

🔒 Todo funciona no teu navegador — nada se sube.

Como funciona

Deseña unha grella CSS visualmente: engade ata 8 columnas e 8 filas, establece cada pista a fr, px, auto ou min/max-content, e axusta os espazos de fila/columna. A vista previa numerada en directo actualízase ao instante e o CSS grid-template xerado máis o HTML correspondente están a un clic do teu portapapeis.

  1. 1
    Dálle forma á grella
    Engade/elimina columnas e filas con + e −.
  2. 2
    Establece as pistas
    Cada columna e fila obtén a súa propia unidade (1fr, 100px, auto…).
  3. 3
    Axusta os espazos
    Controis deslizantes separados para row-gap e column-gap.
  4. 4
    Copia o código
    CSS listo para produción e o esqueleto HTML correspondente.

Todo se executa no teu navegador — nada se sube.

Ferramentas relacionadas

↔️

Xerador de Flexbox CSS

Experimenta coa dirección, axuste, xustificación e aliñamento flex en elementos en directo — e copia o CSS.

Próbao
📐

Xerador de CSS clamp()

Xera un valor CSS clamp() fluído para tipografía e espazado adaptable. Establece o tamaño mínimo/máximo e o rango de ventá, ve una previsualización en directo e copia o CSS nunha liña.

Próbao
📓

Papel imprimible — Papel pautado, cuadriculado, de puntos e de música (PDF)

Imprime o teu propio papel: pautado (de liña ancha ou «college ruled»), cuadriculado, de puntos, isométrico, de práctica de escritura, de pentagrama ou de notas Cornell, en A4, Letter, A5 ou Legal, de calquera cor de liña e coas páxinas que precises. Un PDF vectorial nítido feito no navegador.

Próbao

Preguntas frecuentes