grid-template

Definición de .grid-template aplicado en CSS

La propiedad CSS .grid-template es una abreviatura que le permite definir columnas de cuadrícula, filas y áreas en un recipiente de cuadrícula CSS con una declaración.

Caso de uso de grid-template

Esta propiedad de CSS habitualmente se emplea de la siguiente manera:

.grid-container {
  display: grid;
  grid-template:
    "header  header"
    "sidebar main"   1fr
    "footer  footer" min-content
    / 250px   1fr;
}

Sintaxis de .grid-template en CSS

  grid-template: none|grid-template-rows /   grid-template-columns|grid-template-areas|initial|inherit;

Valores

Valor	Descripción	Manifestación
ninguna	Valor por defecto. Sin tamaño específico de las columnas o filas
filas de plantilla de cuadrícula/columnas de plantilla de cuadrícula	Especifica el(los) tamaño(s) de las columnas y filas
cuadrícula-plantilla-áreas	Especifica el diseño de la cuadrícula usando elementos con nombre
inicial	Establece esta propiedad en su valor predeterminado. Leer sobre inicial
heredar	Hereda esta propiedad de su elemento principal. Leer acerca de

Exploradores compatibles con .grid-template

Los números de la tabla detallan la primera versión del navegador que es completamente compatible con la propiedad.

Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.

Property	Chrome	Internet Explorer / Edge	Firefox	Safari	Opera
grid-template-areas	57	16	52	10	44

Bibliografía

• CSS Grid Layout Module Level 2
• The grid-template Shorthand (Rachel Andrew)
• Use Grid Shorthand to Visualize Explicit CSS Grid Tracks (thoughtbot)

Echa un vistazo a estas otras propiedades

• grid-template-areas
• grid-template-columns
• grid-template-rows
• Todas las propiedades CSS