Cómo generar código CSS Grid con columnas, filas y separaciones

Qué puedes generar

Este generador sirve para obtener una base de CSS Grid a partir de la estructura que quieras dar a una cuadrícula. Puedes definir columnas, filas y separación general o establecer por separado la distancia entre columnas y filas. Es útil cuando necesitas pasar rápidamente de una distribución pensada en términos de columnas y filas a declaraciones CSS que puedas revisar y adaptar.

La herramienta trabaja con entradas opcionales. Si no indicas valores, parte de 3 columnas, filas automáticas, una separación general de 10 y separaciones individuales de 0 para columnas y filas. Las separaciones numéricas que se incorporan al CSS usan píxeles. El resultado incluye la declaración de cuadrícula y plantillas independientes para columnas y filas.

Pasos para generar la cuadrícula

1. Abre el generador y localiza los controles para columnas, filas, separación general, separación entre columnas y separación entre filas.

2. Escribe el número de columnas que necesitas, por ejemplo 3. Los valores formados solo por dígitos se convierten en una plantilla repetida con una fracción (1fr) para cada columna. También puedes introducir texto CSS personalizado, como 200px 1fr o 1fr 1fr 1fr; ese texto se conserva para la declaración de columnas.

3. Define las filas. Un número formado solo por dígitos, salvo auto, se transforma en una repetición de filas automáticas. Si escribes otro texto, se mantiene como contenido de la plantilla de filas. Si dejas este campo sin especificar, se usa el valor automático predeterminado.

4. Introduce una separación general si quieres aplicar la misma distancia a la cuadrícula. Un valor con contenido genera una declaración gap con unidad px. Para controlar cada dirección por separado, introduce también valores en los campos de separación entre columnas o entre filas. Cada declaración individual se genera solo cuando su valor tiene contenido; si el valor es falso o equivalente a vacío, esa declaración se omite.

5. Revisa el código CSS generado. Comprueba que el número o el texto de las columnas y filas representa la distribución que buscas y que las separaciones aparecen en el nivel adecuado. Después puedes copiar el resultado y ajustarlo en tu hoja de estilos.

Cómo leer el resultado

El resultado es código CSS que declara display: grid y contiene plantillas separadas para columnas y filas. Cuando has introducido un número de columnas, busca una notación repeat con ese número y 1fr. En las filas, un número distinto de auto se refleja mediante una repetición con ese número y auto. Las entradas de texto que no cumplen esas condiciones no se reinterpretan: se conservan en la declaración correspondiente.

La separación general aparece como gap con píxeles cuando el valor tiene contenido. Las separaciones específicas aparecen como column-gap y row-gap bajo la misma condición individual. Por eso, un resultado puede contener una separación general, separaciones específicas o ninguna de ellas, según los campos que hayas rellenado. Conviene interpretar el resultado como una base de estilos y revisar la sintaxis personalizada antes de incorporarla a un proyecto.

Ejemplo práctico

Quieres preparar una cuadrícula de tres columnas y dos filas con una separación uniforme de 16 píxeles.

Introduce 3 en columnas, 2 en filas y 16 en la separación general; después revisa el CSS generado.

El resultado contiene display: grid, una plantilla de columnas con repeat(3, 1fr), una plantilla de filas con repeat(2, auto) y una declaración gap: 16px.

Limitaciones

• Las expresiones de columnas y filas que no son solo dígitos se conservan como texto, y las separaciones numéricas se generan en píxeles; el resultado debe revisarse antes de usarlo en una hoja de estilos.

Errores frecuentes

• Si esperas que una expresión personalizada se convierta en otra estructura o que una separación conserve una unidad escrita por tu cuenta, revisa la entrada: solo los valores de columnas y filas formados por dígitos reciben la transformación descrita, y las separaciones numéricas se emiten en píxeles.

Preguntas frecuentes

¿Qué ocurre si escribo un número de columnas?

Si introduces un número formado solo por dígitos, las columnas se expresan con una repetición de ese número y 1fr. Si introduces texto como 200px 1fr, ese texto se conserva en la plantilla de columnas.

¿En qué unidad se generan las separaciones?

Si el valor de la separación tiene contenido, se genera con la unidad px. Si dejas vacío un campo de separación individual, se omite la declaración correspondiente.

¿Puedo usar filas automáticas o personalizadas?

Si introduces un número formado solo por dígitos y distinto de auto, se genera una repetición de filas con auto. Si escribes otro texto, se conserva en la plantilla de filas.