Generador de Grid CSS
Un generador de CSS Grid permite construir una cuadrícula a clics en vez de adivinar valores. Ajusta columnas, filas, separaciones y tamaños de pista y el panel de código escribe la regla: la cuadrícula 3 × 3 por defecto produce .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 16px 16px; } y nueve div a juego.
Configuración
Item Properties
Vista Previa
Código Generado
Acerca de Generador de Grid CSS
La herramienta abre con una cuadrícula 3 × 3, separaciones de 16 píxeles y todas las pistas en 1fr. El panel Ajustes de la izquierda cambia Columnas y Filas, la separación de columna y la de fila, y después lista un campo por pista bajo Tamaños de columna y Tamaños de fila: una pista puede valer 1fr, 200px, auto, minmax(200px, 1fr) o cualquier otro valor que acepte CSS. El bloque Alineación expone las cuatro propiedades del contenedor —justify-items, align-items, justify-content y align-content— como stretch, start, center o end.
Seis preajustes lo fijan todo de golpe: Holy Grail (tres columnas de 200px, 1fr, 200px sobre filas auto, 1fr, auto), Sidebar (250px y 1fr), Dashboard (cuatro columnas iguales sobre auto, 1fr, 1fr), Gallery (3 × 3 con separaciones de 8 píxeles), Blog (1fr, 2fr, 1fr sobre auto y 1fr) y Cards (3 × 2 con separaciones de 24 píxeles).
La vista previa de la derecha es una cuadrícula CSS real y no un dibujo, así que se recoloca igual que lo haría un navegador. Cada celda es un bloque de color que puedes seleccionar con un clic; la seleccionada recibe un contorno blanco y sus extensiones de columna y fila pasan a ser editables. El panel Código Generado imprime el conjunto: un bloque style con .grid-container, una regla .item-N por cada celda que hayas movido, y los div HTML. Tres botones copian el CSS, el HTML o ambos.
Dos detalles útiles. La separación se escribe con dos valores —primero filas y luego columnas—, el orden que espera la forma abreviada gap, así que gap: 16px 24px son 16 píxeles entre filas. Y las reglas .item-N solo aparecen para las celdas que hayas movido: una cuadrícula sencilla produce la regla del contenedor y nada más, que suele ser justo lo que quieres pegar. No se sube nada ni se guarda nada entre visitas.
Casos de uso
Cómo usar
Parte de un preajuste —Holy Grail, Sidebar, Dashboard, Gallery, Blog o Cards— o quédate con la cuadrícula 3 × 3 por defecto.
Ajusta Columnas, Filas y las separaciones de columna y fila en el panel Ajustes.
Edita cada pista en Tamaños de columna y Tamaños de fila; cada campo admite cualquier valor de pista CSS, como 1fr, 200px o minmax(200px, 1fr).
Usa los desplegables de Alineación para justify-items, align-items, justify-content y align-content, y pulsa un bloque de la vista previa para cambiar la extensión de una celda.
Lee el panel Código Generado y pulsa Copiar CSS, Copiar HTML o Copiar todo.
Recoge el resultado en Código generado con el botón CSS, el botón HTML o Copiar todo para llevarte el marcado y la hoja de estilos juntos.
Consejos Pro
- Los campos de pista aceptan cualquier valor CSS válido, no solo números: minmax(200px, 1fr), auto o min-content funcionan, porque el texto pasa tal cual a grid-template-columns.
- gap se imprime como separación de filas y luego de columnas: gap: 16px 24px son 16 píxeles entre filas y 24 entre columnas. Pon las dos iguales si esa forma confunde en una revisión.
- Solo las celdas que has movido reciben una regla .item-N, así que si el código no muestra más que .grid-container es lo correcto: la colocación por defecto no necesita CSS por elemento.
- Pulsa un bloque de la vista previa para seleccionarlo: el contorno blanco indica qué celda están editando los campos de extensión, y otro clic la deselecciona.
- Los preajustes sobrescriben los tamaños de pista y las separaciones: aplica primero el preajuste y haz después tus cambios, no al revés.
Solución de problemas
La vista previa no se parece nada a mi página.
El contenedor de la vista previa ocupa el 100 % de ancho con 300 píxeles de alto mínimo y ningún otro estilo, mientras que tu página tiene su propio ancho, relleno y tipografía. Pega el código en tu maqueta para juzgarlo allí: las propiedades de grid son idénticas, solo cambia la caja que las rodea.
Cambiar las columnas ha reiniciado mis extensiones.
Cambiar el número de columnas o filas reconstruye la lista de elementos y los recoloca en la cuadrícula por defecto, porque una extensión que llegaba a la columna cuatro no tiene sentido en una de tres. Fija primero el tamaño de la cuadrícula y ajusta después las celdas.
Un preajuste ha borrado los tamaños de pista que escribí.
Los preajustes fijan columnas, filas, todos los tamaños de pista y, en Gallery y Cards, también las separaciones. Para eso están. Aplica el preajuste como punto de partida y edita después; no hay deshacer, así que copia antes el CSS si quieres conservarlo.
La separación parece al revés en un sentido.
La forma abreviada imprime primero la separación de filas y luego la de columnas: gap: 8px 24px son 8 píxeles entre filas y 24 entre columnas. Si te resulta confuso, pon la misma cifra en ambas y la ambigüedad desaparece.
Los botones de copiar no hacen nada.
Usan la API del portapapeles del navegador, que exige página segura y clic real y que puede bloquear una extensión. Si el botón no cambia a la marca de verificación, selecciona el código del panel negro y pulsa Ctrl+C, o Cmd+C en un Mac.
Preguntas frecuentes
Pon display: grid en el contenedor, describe las pistas con grid-template-columns y grid-template-rows y el espaciado con gap. Esta página escribe exactamente eso: por defecto produce .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 16px 16px; } y los nueve div hijos.
Un editor visual de las propiedades del contenedor. En vez de teclear grid-template-columns y recargar para ver el resultado, ajustas columnas, filas, separaciones y tamaños de pista con campos, ves responder una cuadrícula real y copias la regla terminada. La salida es CSS puro, sin framework ni convenciones de clases que aprender.
Es una fracción del espacio libre que queda tras descontar las pistas fijas y las separaciones. Tres columnas de 1fr se llevan un tercio cada una; 1fr 2fr 1fr da la mitad a la central. El preajuste Holy Grail mezcla ambas ideas: 200px 1fr 200px fija las columnas exteriores y deja que la del medio absorba el resto.
Resuelven problemas distintos más que competir. Grid coloca elementos en filas y columnas a la vez, que es lo que genera esta herramienta; Flexbox alinea sobre un solo eje y va mejor para una fila de botones o una barra de navegación. Lo habitual es usar grid para la maqueta general y flex dentro de las celdas.
Sí, y es lo normal. Un hijo de la cuadrícula puede ser a su vez display: flex: la regla de contenedor de esta página coloca el bloque y una regla flex que añadas ordena su contenido. Nada del CSS generado lo impide: .grid-container solo afecta a la colocación de los hijos directos.
Con el bloque Alineación. justify-items: center centra cada elemento horizontalmente dentro de su celda y align-items: center lo centra en vertical; justify-content y align-content mueven la cuadrícula entera dentro del contenedor cuando las pistas no lo llenan. Ajústalas aquí y las propiedades solo aparecen en el CSS si difieren de stretch.
Pulsa ese bloque en la vista previa para seleccionarlo y cambia su fin de columna. El CSS generado gana una regla .item-N con grid-column: inicio / fin solo para esa celda; por ejemplo grid-column: 1 / 3 abarca las dos primeras columnas. Las celdas que no toques no salen en el CSS.
Sí. Grid lleva años soportado por todos los navegadores actuales importantes, y las propiedades que escribe esta herramienta —display, grid-template-columns, grid-template-rows, gap y las cuatro de alineación— son las estándar y sin prefijo. Para un navegador anterior, lo habitual es un respaldo con flex.
Históricamente eran las clases de columnas de un framework, por ejemplo una fila de doce columnas con la que se montaban las páginas. CSS Grid sustituye eso por un modo de maquetación del propio lenguaje: en lugar de añadir clases, declaras las pistas. Por eso el código de aquí tiene una clase de contenedor y ninguna clase de columnas.
El bloque style va en tu hoja de estilos o en un elemento style, y los div donde deba aparecer la maqueta. Los botones de copiar CSS y copiar HTML separan las dos partes, mientras que Copiar todo te da el bloque style y el marcado juntos, lo más rápido para probarlo en un archivo en blanco.