grid-template

Índice

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.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
grid-template-areas 57 16 52 10 44

Bibliografía

Echa un vistazo a estas otras propiedades

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso