Atributo grid-area de CSS

Definición y uso

El atributo grid-area define el tamaño y la posición del elemento de cuadrícula en el diseño de cuadrícula, y es una abreviatura de los siguientes atributos:

El atributo grid-area también se puede usar para asignar nombres a los elementos de cuadrícula. Luego, se puede acceder a través del contenedor de cuadrícula grid-template-areas Referencia de atributo nombrado del elemento de cuadrícula. Vea los siguientes ejemplos.

Por favor, consulte:

Tutorial de CSS:Diseño de cuadrícula CSS

Ejemplo

Ejemplo 1

Hace que "item1" comience en la fila 2, columna 1 y abarque dos filas y tres columnas:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

Pruebe usted mismo

Consejo:Se proporcionan más ejemplos en la parte inferior de la página.

Sintaxis de CSS

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Valor de atributo

Valor Descripción
grid-row-start Se especifica desde qué fila comenzar a mostrar el elemento.
grid-column-start Se especifica desde qué columna comenzar a mostrar el elemento.
grid-row-end Especifica en qué línea de fila detener la visualización del proyecto, o cruzar cuántas filas.
grid-column-end Especifica en qué línea de columna detener la visualización del proyecto, o cruzar cuántas columnas.
itemname Define el proyecto del elemento de la rejilla.

Detalles técnicos

Valor predeterminado: auto / auto / auto / auto
Herencia: No
Producción de animación: Admite. Consulte:Propiedades relacionadas con la animación.
Versión: Modulo de Diseño de Rejilla CSS Nivel 1
Sintaxis de JavaScript: object.style.gridArea="1 / 2 / span 2 / span 3"

Más ejemplos

Ejemplo 2

Item1 se llama 'myArea' y abarca todos los cinco columnas en un diseño de rejilla de cinco columnas:

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

Pruebe usted mismo

Ejemplo 3

Hacer que 'myArea' abarque dos columnas en un diseño de rejilla de cinco columnas (puntos suspensivos indican elementos sin nombre):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
}

Pruebe usted mismo

Ejemplo 4

Hacer que 'item1' abarque dos columnas y dos filas:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

Pruebe usted mismo

Ejemplo 5

Nombra todos los elementos y crea una plantilla de página web lista para usar:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

Pruebe usted mismo

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite completamente esa propiedad.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44