Cómo usar: Generador de CSS Grid
- Define el número de columnas y filas y los gaps, o parte de un preset como Holy grail.
- Edita los tamaños de las pistas (encima de la cuadrícula para las columnas, a la izquierda para las filas):
1fr,240px,auto,minmax(0, 1fr). - Arrastra sobre las celdas para crear un área y ponle un nombre como
headerosidebar. - Copia el CSS y el esqueleto HTML en tu proyecto.
Áreas de grid en pocas palabras
grid-template-areas te permite dibujar el layout con nombres: cada cadena es una fila, cada palabra una columna, y un punto (.) deja una celda vacía. Los hijos se colocan con grid-area: nombre, así que el CSS se lee como un dibujo de la página.
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-areas:
"header header"
"sidebar main";
}Tamaños de pistas
| Valor | Significado |
|---|---|
1fr | una parte del espacio libre |
minmax(0, 1fr) | como 1fr, pero el contenido largo no puede estirar la columna |
auto | tan grande como el contenido |
240px, 20rem | un tamaño fijo |
repeat(auto-fill, minmax(200px, 1fr)) | tantas columnas como quepan, ideal para cuadrículas de tarjetas |
Las áreas deben ser rectángulos: la herramienta solo permite dibujar rectángulos, así que el CSS siempre es válido. Para una única fila o columna de elementos, flexbox suele ser más sencillo. Relacionados: Calculadora de Clamp, Formateador de CSS.
También se busca como: generador css grid, generador de grid css, constructor css grid, grid-template-areas generador, plantilla css grid, generador de layouts css, css grid online, generador grid responsive.
Herramientas que combinan con: Generador de CSS Grid
- Generador de Flexbox CSS — Mira exactamente qué hace cada propiedad de flexbox: define la dirección, el ajuste de línea, justify-content, align-items y el gap, añade o quita elementos, y haz clic en cualquier elemento para configurar su flex-grow, shrink, basis, order y align-self.
- Generador de Border Radius — Redondea las esquinas de cualquier caja: arrastra un control para todas las esquinas o define cada esquina por separado, cambia a esquinas elípticas para formas de blob y hoja, y copia el CSS border-radius válido más corto.
- Generador de Box Shadow — Apila varias capas de sombra, ajusta el desplazamiento, el desenfoque, la expansión y la opacidad sobre una tarjeta en vivo, y luego copia el CSS de box-shadow o text-shadow.
- Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
Preguntas frecuentes
¿Cómo creo un layout con CSS grid?
Define columnas y filas, arrastra sobre las celdas para crear áreas con nombre (header, sidebar, main…) y copia el CSS generado de grid-template-columns, grid-template-rows y grid-template-areas junto con el HTML.
¿Cuál es la diferencia entre 1fr y minmax(0, 1fr)?
1fr tiene como mínimo el tamaño de su contenido, así que una palabra larga o una imagen ancha pueden hacer crecer la columna. minmax(0, 1fr) permite que la columna se reduzca por debajo de su contenido, manteniendo las columnas iguales.
¿Por qué las áreas de grid deben ser rectángulos?
La especificación de CSS Grid solo permite áreas con nombre rectangulares; un área en forma de L hace que toda la declaración grid-template-areas sea inválida.
¿Cómo hago que el grid sea responsive?
Añade una media query que redefina grid-template-columns y grid-template-areas para pantallas pequeñas, por ejemplo una sola columna con "header" "main" "sidebar".
¿Puedo instalar Generador de CSS Grid como aplicación web y utilizarla sin conexión?
Sí. Generador de CSS Grid es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.