Atributo CSS grid-template-areas

Definición y uso

El atributo grid-template-areas define las áreas en el diseño de rejilla.

Puede usar grid-area Nombre de los proyectos de malla de propiedades, luego cite el nombre en el atributo grid-template-areas.

Cada área está definida por un guión. Utilice el punto para referirse a proyectos sin nombre.

Vea también:

Tutoriales de CSS:Proyectos de grilla de CSS

Manual de referencia de CSS:Atributo grid-area

Manual de referencia de CSS:Atributo grid-template

Ejemplo

Ejemplo 1

Hace que el proyecto "myArea" abarque dos columnas en un diseño de grilla de cinco columnas:

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

Pruebe usted mismo

Ejemplo 2

Especifica dos filas, donde "item1" abarca los dos primeros columnas en las dos primeras filas (en un diseño de grilla de cinco columnas):

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

Pruebe usted mismo

Ejemplo 3

Nombra todos los elementos y crea un template de página web listo para usar:

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

Pruebe usted mismo

Sintaxis de CSS

grid-template-areas: none|itemnames;

Valor del atributo

Valor Descripción
none Valor predeterminado. Áreas de grilla sin nombre (grid areas).
itemnames Especifica la secuencia en la que se debe mostrar cada columna y cada fila.

Detalles técnicos

Valor predeterminado: none
Herencia: No
Producción de animación: Admite. Consulte:Propiedades relacionadas con la animación.
Versión: Módulo de Diseño de Grid CSS Nivel 1
Sintaxis de JavaScript: object.style.gridTemplateAreas=". . . myArea myArea"

Compatibilidad del navegador

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

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