Atributo CSS grid-template

Definición y uso

El atributo grid-template es una abreviatura de los siguientes atributos:

Vea también:

Tutoriales de CSS:Proyectos de grilla CSS

Manual de referencia de CSS:Atributo grid-area

Manual de referencia de CSS:Atributo grid-template-rows

Manual de referencia de CSS:Atributo grid-template-columns

Manual de referencia de CSS:Atributo grid-template-areas

Ejemplo

Ejemplo 1

Crear un diseño de cuadrícula de tres columnas con una altura de 150 píxeles para la primera columna:

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

Intente hacerlo usted mismo

Ejemplo 2

Se especifican dos filas, en las que "item1" abarca las dos primeras filas de las dos primeras columnas (en un diseño de rejilla de cinco columnas):

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

Intente hacerlo usted mismo

Ejemplo 3

Nombra todos los proyectos y luego crea un 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 {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Intente hacerlo usted mismo

Sintaxis de CSS

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Valor del atributo
Valor Descripción
none Valor predeterminado. No se especifican las dimensiones de las columnas o filas.
grid-template-rows / grid-template-columns Se especifican las dimensiones de las columnas y filas.
grid-template-areas Se especifica el diseño de rejilla utilizando proyectos nombrados.
initial Establezca este atributo en su valor predeterminado. Consulte initial.
inherit Hereda este atributo de su elemento padre. Consulte inherit.

Detalles técnicos

Valor predeterminado: none none none
Herencia: No
Producción de animación: Admite. Consulte:Atributos relacionados con la animación.
Versión: Módulo de diseño de rejilla CSS Grid Level 1
Sintaxis de JavaScript: object.style.gridTemplate = "250px / auto auto"

Compatibilidad del navegador

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

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