Diseño / Diseño

Generador de CSS Grid (constructor visual de grid-template-areas)

Configura las columnas, filas y el espacio, arrastra sobre las celdas para crear áreas con nombre, como header, sidebar y main, y copia el CSS con grid-template-columns, grid-template-rows y grid-template-areas, listo para pegar.

Generador de CSS Grid (constructor visual de grid-template-areas): Los tamaños de las pistas se escriben a medida que los introduces, como 200px 1fr 1fr, y los tamaños repetidos se convierten en repeat(). Cada área se transforma en un nombre dentro de grid-template-areas, con un punto para las celdas vacías, además de una regla que coloca un elemento mediante grid-area. Las áreas deben ser rectángulos y no pueden superponerse, como exige CSS; el diseño se guarda en este navegador. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.

Categoría
Herramientas de desarrollo
Se ejecuta
En tu navegador
Coste
Gratis · sin registro
Disponibilidad
Lista para usar
Generador de grid de CSSProcesamiento local

Funciona por completo en tu navegador

Arrastra por las celdas para crear un área; puede abarcar varias filas y columnas. Escribe tamaños de pista como 1fr, 200px, auto o minmax(100px, 1fr).

CSS

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

Asigna a cada elemento hijo la clase de su área. Las celdas que aparecen como un punto se mantienen vacías.

Áreas con nombre

Cada cadena de grid-template-areas corresponde a una fila, y cada palabra, a una celda: "header header" "sidebar main" coloca el encabezado a lo largo de ambas columnas. Un elemento hijo con grid-area: main ocupa todas las celdas denominadas main. Los nombres no tienen que coincidir con los nombres de las clases, pero mantenerlos iguales facilita la lectura del CSS.

Tamaños de pista habituales

minmax(200px, 1fr) mantiene una columna con una anchura mínima de 200 px, pero permite que crezca; auto se adapta al contenido; repeat(auto-fill, minmax(12rem, 1fr)) crea tantas columnas como quepan, un patrón útil para cuadrículas de tarjetas. El espaciado puede hacerse fluido con el generador de CSS clamp.

Cómo se usa

  1. Elige el número de columnas y filas y escribe sus tamaños.
  2. Arrastra sobre las celdas para crear áreas y cambia sus nombres.
  3. Copia el CSS y asigna a cada elemento hijo la clase de su área.

Privacidad y límites

El diseño se crea en tu navegador.

Herramientas relacionadas

CSS clamp()Sombra de cajaFormateador CSSFlexboxClip path

Preguntas frecuentes

¿Qué significa fr?

Una fracción del espacio libre: 1fr 2fr da a la segunda columna el doble de ancho que a la primera, después de descontar los tamaños fijos y los espacios.

¿Por qué las áreas no pueden superponerse ni tener forma de L?

grid-template-areas solo acepta rectángulos y cada nombre puede aparecer una sola vez. En CSS Grid es posible superponer elementos, pero necesitan números de línea explícitos en lugar de áreas con nombre.

¿Cómo hago que el diseño sea adaptable?

Usa el CSS generado para el diseño de pantalla ancha y redefine grid-template-columns y grid-template-areas dentro de una media query para pantallas estrechas.

Herramienta gratuita · se ejecuta en tu navegador · sin cuenta