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.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| grid-template-columns | 57 | 16 | 52 | 10 | 44 |
