Generador de CSS Grid
CSS Grid es la forma estándar de construir diseños 2D, pero la sintaxis del contenedor es fácil de olvidar. Este generador escribe las reglas del contenedor por ti: un número fijo de columnas de igual ancho, la separación entre pistas y una media query que cambia a columnas auto-fit por debajo de un ancho mínimo, para que el diseño siga siendo legible en pantallas pequeñas. El resultado es CSS de contenedor puro; la colocación de los elementos queda en tu propia hoja de estilos.
Cómo construir una cuadrícula
-
1
Define el número de columnas
Entre 1 y 12 pistas de igual ancho.
-
2
Define el ancho mínimo de columna
Por debajo de este ancho la cuadrícula cambia a auto-fit para que cada columna conserve un tamaño mínimo utilizable.
-
3
Define la separación
El espacio entre columnas y filas.
-
4
Genera el CSS
La herramienta escribe las reglas del contenedor y la alternativa adaptable.
-
5
Copia el código
Pega las reglas del contenedor en tu hoja de estilos y coloca los elementos con tus propias reglas `grid-column` / `grid-row`.
El contenedor generado
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
@media (max-width: 660px) {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
repeat(3, minmax(0, 1fr)): tres columnas que comparten el ancho disponible por igual.1fres una fracción del espacio restante;minmax(0, 1fr)permite que las columnas se reduzcan por debajo del tamaño de su contenido.gap: el espacio entre cada pista.- La media query cambia a
repeat(auto-fit, minmax(220px, 1fr)), que crea tantas columnas como quepan, cada una de al menos 220px. El punto de ruptura es el número de columnas por el ancho mínimo (con un mínimo de 120px), así que en pantallas pequeñas la cuadrícula se recoloca en lugar de comprimirse.
La unidad fr
fr significa “una fracción del espacio restante”: después de restar las pistas de tamaño fijo, el espacio restante se divide entre el número total de unidades fr.
grid-template-columns: 200px 1fr 2fr;
En un contenedor de 1000px, la primera columna ocupa 200px y los 800px restantes se dividen 1:2, es decir, 267px y 533px.
auto-fill frente a auto-fit
auto-fill: crea pistas vacías de relleno cuando no hay suficientes elementos.auto-fit: reduce las pistas vacías a cero, de modo que los elementos restantes se estiran para llenar la fila.
La alternativa adaptable usa auto-fit, que es lo que quieren las cuadrículas de tarjetas: la fila siempre se ve completa.
Columnas de distinto ancho
El generador emite columnas iguales. Edita el resultado para combinar tamaños: grid-template-columns: 200px 1fr 2fr; da una barra lateral fija y dos columnas flexibles en proporción 1:2. Para áreas con nombre (grid-template-areas) o colocación explícita de elementos (grid-column: 1 / 3), añade esas reglas a mano sobre el contenedor generado.
Grid frente a Flexbox
- Grid: diseño 2D explícito con pistas. Bueno cuando el diseño tiene estructura de filas y columnas (un esqueleto de página, una galería, un panel).
- Flexbox: alineación 1D a lo largo de un solo eje. Bueno cuando los elementos fluyen de forma natural (una barra de navegación, una fila de botones).
Los diseños reales suelen combinar ambos: Grid para el esqueleto de la página y Flexbox dentro de los componentes.
Errores habituales
- Olvidar
min-width: 0en los hijos: los elementos de la cuadrícula usan por defecto el ancho mínimo de su contenido, lo que impide que las columnasfrse reduzcan por debajo de la palabra más larga. Ponmin-width: 0en los hijos para que puedan encogerse. - Anidar sin
display: grid: un hijo de la cuadrícula no es en sí mismo una cuadrícula salvo que lo declares.
Preguntas frecuentes
Protege el diseño en pantallas pequeñas. La media query generada cambia a repeat(auto-fit, minmax(ancho, 1fr)), de modo que cada columna conserva al menos ese ancho y la cuadrícula añade filas en lugar de comprimir las columnas.
El generador emite columnas iguales. Edita la línea grid-template-columns del resultado para combinar tamaños, por ejemplo 1fr 2fr 1fr para una columna central ancha, o 200px 1fr para una barra lateral fija.
Normalmente porque el elemento tiene el min-width: auto por defecto, que equivale al ancho mínimo de su contenido. Pon min-width: 0 en el elemento de la cuadrícula para que pueda encogerse dentro de su celda.
Grid cuando el diseño tiene estructura de filas y columnas (una página, una galería de fotos, un panel). Flexbox cuando los elementos fluyen a lo largo de un solo eje (una barra de navegación, una fila de botones, una pila de campos de formulario).
Herramientas relacionadas
Referencia de la tabla ASCII
Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.
Referencia de caracteres HTML
Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.
Generador de letras aleatorias
Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.
Referencia de atajos de teclado
Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.
Formateador de JSON
Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.
Generador de Paletas de Color
Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.