Saltar al contenido principal
LibraTool logoLibraTool

Generador de CSS Grid gratis

Diseña visualmente una cuadrícula CSS — pistas, unidades y espacios — y copia el CSS e HTML generados.

Funciona sin conexión una vez cargado
Preajustes
Columnas (3)
Filas (2)
Previsualización en 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>

🔒 Todo se ejecuta en tu navegador — nada se carga.

Cómo funciona

Diseña una cuadrícula CSS visualmente: añade hasta 8 columnas y 8 filas, fija cada pista a fr, px, auto o min/max-content, y ajusta los espacios de fila/columna. La vista previa en vivo numerada se actualiza al instante y el CSS grid-template generado más el HTML correspondiente están a un clic de tu portapapeles.

  1. 1
    Da forma a la cuadrícula
    Añade/quita columnas y filas con + y −.
  2. 2
    Fija las pistas
    Cada columna y fila recibe su propia unidad (1fr, 100px, auto…).
  3. 3
    Ajusta los espacios
    Controles deslizantes separados para row-gap y column-gap.
  4. 4
    Copia el código
    CSS listo para producción y el esqueleto HTML correspondiente.

Todo se ejecuta en tu navegador: nada se sube.

Herramientas relacionadas

↔️

Generador de CSS Flexbox

Experimenta con dirección flex, ajuste, justificación y alineación en elementos en vivo — y copia el CSS.

Probar
📐

Generador de clamp() para CSS

Genere un valor clamp() de CSS fluido para tipografía y espaciado adaptables. Establezca el tamaño mínimo/máximo y el rango de la ventana gráfica, vea una vista previa en vivo y copie el CSS de una sola línea.

Probar
📓

Papel imprimible — Rayado, cuadriculado, punteado y pautado (PDF)

Imprime tu propio papel: rayado (renglón ancho o universitario), cuadriculado, punteado, isométrico, de práctica de escritura, pentagrama o notas Cornell, en A4, Carta, A5 u Oficio, con el color de línea que quieras y las páginas que necesites. Un PDF vectorial nítido creado en tu navegador.

Probar

Preguntas frecuentes