Generador de CSS Grid
Diseña una cuadrícula CSS de forma visual: define el tamaño de columnas y filas, arrastra sobre las celdas para crear áreas con nombre y copia el CSS grid-template y el HTML listos para usar. Todo ocurre en tu navegador.
Última actualización:
Pistas
Áreas con nombre
Cómo usar Generador de CSS Grid
- Empieza con una plantilla o con la cuadrícula en blanco de 3×3.
- Define las pistas: escribe un tamaño para cada columna y fila (por ejemplo 200px, 1fr o minmax(100px, 1fr)) y usa + Columna / + Fila para añadir más.
- Arrastra sobre las celdas de la vista previa para crear un área con nombre y luego cámbiale el nombre en la lista Áreas con nombre.
- Ajusta los espacios y, si hace falta, una altura mínima como 100vh. Marca Apilar áreas en móvil para un layout responsive.
- Pulsa Copiar CSS y Copiar HTML y pégalos en tu proyecto.
Tamaños de pista de CSS grid explicados
| Tamaño de pista | Significado | Uso típico |
|---|---|---|
200px | Tamaño fijo | Barras laterales, columnas de iconos |
25% | Porcentaje del contenedor | Rara vez hace falta; fr suele ser mejor porque tiene en cuenta los espacios |
1fr | Una parte del espacio libre (mín. tamaño del contenido) | Contenido principal, columnas iguales |
auto | Ajustado al contenido | Filas de encabezado y pie de página |
min-content | Tan estrecho como la palabra más larga o el elemento más ancho | Columnas de etiquetas ajustadas |
max-content | Tan ancho como el contenido sin saltos de línea | Columnas que no deben partirse |
minmax(200px, 1fr) | Al menos 200px, crece hasta una parte | Columnas flexibles con un mínimo |
fit-content(300px) | Tamaño del contenido, pero no más ancho de 300px | Barras laterales que se adaptan a su contenido |
Ejemplo práctico: cómo se calcula fr
Un contenedor mide 1000px de ancho con grid-template-columns: 200px 1fr 2fr y column-gap: 20px. Los dos espacios ocupan 40px y la columna fija 200px, lo que deja 1000 − 200 − 40 = 760px de espacio libre. Eso se divide en 1 + 2 = 3 partes de unos 253.3px, así que la segunda columna mide 253.3px de ancho y la tercera 506.7px. Si el contenedor se reduce a 700px, las partes pasan a ser (700 − 240) ÷ 3 ≈ 153.3px, mientras que la primera columna se mantiene en 200px.
Reglas y consejos para las áreas de plantilla
- Una cadena por fila, un token por columna. Cada cadena de fila debe tener tantas celdas como columnas haya.
- Solo rectángulos. Cada nombre debe cubrir un único rectángulo; la herramienta lo garantiza dejándote arrastrar solo rectángulos y bloqueando las superposiciones.
- Los puntos son celdas vacías. Un
.(o varios puntos como...) marca una celda que no usa ninguna área con nombre. - Los nombres son identificadores. Usa letras, dígitos, guiones y guiones bajos, y no empieces por un dígito.
- El orden del código sigue importando. Las áreas cambian dónde aparecen los elementos, no el orden de lectura de los lectores de pantalla. Mantén tu HTML en un orden lógico (header, nav, main, aside, footer).
- Los números de línea son una alternativa.
grid-area: 1 / 1 / 2 / 4significa row-start / column-start / row-end / column-end, con las líneas contadas desde 1.
Para filas de elementos en una sola dimensión dentro de un área, combina grid con flexbox. Cuando termines, ordena el resultado con el Formateador de CSS y el Formateador de HTML.
Preguntas frecuentes
¿Qué significa la unidad fr en CSS grid?
fr es una fracción del espacio libre del contenedor grid. Con grid-template-columns: 1fr 2fr, el ancho restante (después de las pistas fijas y los espacios) se divide en 3 partes: la primera columna recibe una parte y la segunda dos.
¿Cómo funciona grid-template-areas?
Escribes una cadena entre comillas por fila, con un nombre por columna. Repetir un nombre en celdas vecinas hace que esa área las abarque, y un punto (.) deja una celda vacía. Luego cada hijo recibe grid-area: nombre. Cada área con nombre debe formar un único rectángulo.
¿Por qué mis áreas no pueden tener forma de L ni superponerse?
La especificación CSS solo permite áreas con nombre rectangulares en grid-template-areas; una forma de L o un hueco en un nombre invalida toda la declaración. Los elementos colocados por números de línea pueden superponerse, pero las áreas con nombre de la plantilla no.
¿Qué diferencia hay entre 1fr y minmax(0, 1fr)?
1fr en realidad significa minmax(auto, 1fr), así que una columna no se encoge por debajo del ancho mínimo de su contenido, lo que puede provocar desbordamiento con palabras largas o imágenes anchas. minmax(0, 1fr) permite que la columna se encoja por completo, manteniendo las columnas realmente iguales.
¿Qué significa auto en una fila o columna?
Una pista auto se ajusta a su contenido, entre el tamaño mínimo y máximo del contenido. Es ideal para encabezados y pies de página. En la vista previa de esta herramienta, las pistas auto vacías reciben un mínimo de 40px para que puedas seguir viéndolas y seleccionándolas.
¿Cómo hago responsive una cuadrícula CSS?
Usa una media query que cambie grid-template-columns y grid-template-areas en pantallas pequeñas, a menudo a una sola columna. Marca Apilar áreas en móvil para generar esa media query, ordenada de arriba abajo y de izquierda a derecha. Para cuadrículas de tarjetas, repeat(auto-fill, minmax(200px, 1fr)) es otro patrón habitual.
¿Debo usar grid o flexbox?
Usa grid cuando organices filas y columnas a la vez, como en plantillas de página y paneles. Usa flexbox para contenido que fluye en una sola dirección, como barras de navegación, barras de herramientas y grupos de botones. Funcionan bien juntos: un área grid puede ser un contenedor flex.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.