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
Los datos y los resultados se procesan en tu navegador, sin subirse ni guardarse automáticamente. Copia los resultados que quieras conservar antes de salir de la página.
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.