Generador CSS Grid
Error: Usar resultados fuera del alcance descrito.
Solución: Crea una cuadrícula CSS de columnas iguales y adapta el código a tu página.
Archivo · Gratis
Generador CSS Grid
Crea una vista previa de cuadrícula y CSS a partir de columnas, filas y separación.
Esta herramienta está archivada. Verifica su método y los datos fechados antes de usarla.
01Introduce los valores
Funciona en tu navegadorFunciona sin conexión en el navegador. Una vez cargados la página y los archivos necesarios, el procesamiento no requiere Internet.
02Generador CSS Grid
Funciona en tu navegador
Cómo funciona
Crea una vista previa de cuadrícula y CSS a partir de columnas, filas y separación.
Funciona en tu navegador
Tus datos se quedan contigo
Los datos se procesan en esta página y no se envían a ningún servidor.
Acerca de esta herramienta
Usar herramienta ↑Crea una vista previa de cuadrícula y CSS a partir de columnas, filas y separación.
Crea una cuadrícula CSS de columnas iguales y adapta el código a tu página.
- Introduce los valores
- Columnas
- Filas
- Separación
- Método de cálculo
Crea una vista previa de cuadrícula y CSS a partir de columnas, filas y separación.
- Ejemplo práctico · Resultado
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;
Método de cálculo
- Crea una cuadrícula CSS de columnas iguales y adapta el código a tu página.
Generador CSS Grid
- Columnas
- 3
- Filas
- 2
- Separación
- 16 px
Resultado
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;
Preguntas frecuentes
¿Cómo interpretar el resultado?
Crea una cuadrícula CSS de columnas iguales y adapta el código a tu página.
¿Adónde van mis datos?
Los cálculos se realizan en tu dispositivo. Los datos no se envían a un servidor.
Términos y definiciones
Introduce los valores
- Columnas
Crea una cuadrícula CSS de columnas iguales y adapta el código a tu página.
Introduzca un entero, sin fracciones.
Mínimo: 1 · Máximo: 12
- Filas
Introduzca un entero, sin fracciones.
Mínimo: 1 · Máximo: 12
- Separación
Introduzca el valor numérico de esta magnitud. Use la unidad indicada junto al campo. px
Mínimo: 0 · Máximo: 100 px
Resultado
- Resultado
Crea una cuadrícula CSS de columnas iguales y adapta el código a tu página.
Calculado con sus datos según el método siguiente.
Errores frecuentes y soluciones
Límites y supuestos
- Crea una cuadrícula CSS de columnas iguales y adapta el código a tu página.
- Los resultados pueden redondearse; esto no mejora la precisión de la medida.