Acerca de esta herramienta
Este generador crea una cuadrícula bidimensional de partes iguales. Filas y columnas deben ser enteros de 1 a 12. El número de elementos es filas por columnas, hasta un máximo de 144.
Cómo usarla
- Introduce columnas y filas como enteros de 1 a 12.
- Ajusta la separación entre columnas y entre filas.
- Observa la cuadrícula y sus elementos numerados en tiempo real.
- Copia el CSS y aplícalo al contenedor de cuadrícula de tu proyecto.
Ejemplos de uso
- 3 columnas × 2 filas muestran 6 elementos.
- 12 columnas × 12 filas alcanzan el límite de 144 elementos.
- Configura 24px entre columnas y 12px entre filas para comparar el espacio en ambos sentidos.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
}Funcionamiento y explicación del CSS
repeat(n, 1fr) crea n pistas iguales; 1fr representa una parte del espacio disponible del contenedor. column-gap y row-gap definen las separaciones entre columnas y filas. Si son iguales, se pueden abreviar con gap.
Usos habituales
- Crear listas de tarjetas y galerías de imágenes.
- Planificar paneles con secciones de igual tamaño.
- Aprender cómo funcionan repeat(), fr y gap.
Privacidad
Todos los datos, cálculos, generación de CSS y vistas previas se procesan en tu navegador. No se sube contenido, no se usan servidores de procesamiento, bases de datos, API en línea ni CDN de terceros, y tus entradas no se guardan automáticamente.
FAQ
¿Qué diferencia hay entre CSS Grid y Flexbox?
Grid controla filas y columnas en diseños bidimensionales; Flexbox distribuye los elementos principalmente en un eje.
¿Qué significa 1fr?
fr representa una parte del espacio libre disponible. Si todas las pistas usan 1fr, normalmente se distribuye en partes iguales.
¿Qué significa repeat(3, 1fr)?
Equivale a 1fr 1fr 1fr: tres pistas de igual tamaño.
¿Qué diferencia hay entre gap y margin?
gap separa las pistas sin añadir espacio exterior al contenedor; margin es el margen exterior de cada elemento.
¿Por qué se limita a 12 filas y 12 columnas?
El límite de 12 en cada dirección mantiene la vista previa en un máximo de 144 elementos para evitar que entradas enormes ralenticen la página.