grid-template-areas

Índice

Definición de .grid-template-areas utilizado en CSS

La propiedad CSS .grid-template-areas le permite definir y nombrar las celdas (o «áreas») en un contenedor de cuadrícula CSS.

Ejemplo de empleo de grid-template-areas

Esta propiedad de CSS normalmente se utiliza de esta forma:

.grid-container {
  display: grid;
  grid-template-areas: "header header" "sidebar main";
}

Sintaxis de .grid-template-areas en CSS

  grid-template-areas: none|itemnames;

Valores

Valor Descripción Manifestación
ninguna Valor por defecto. Sin áreas de cuadrícula nombradas
nombres de elementos Una secuencia que especifica cómo debe mostrarse cada columna y fila

Exploradores compatibles con .grid-template-areas

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- detallan la primera versión que funcionó con un prefijo.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
grid-template-columns 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

Otros artículos que te podrían interesar: