CSS grid-template-areasPropiedad
Ejemplo
El siguiente ejemplo nombra a item1 como "myArea" y abarca cinco columnas:
Pruébalo »
Soporte del navegador
Los números en la tabla indican la primera versión del navegador que soporta la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| grid-template-areas | 57 | 16 | 52 | 10 | 44 |
Definición de la propiedad y notas de uso
La propiedad grid-template-areas se utiliza para configurar el diseño de cuadrícula (grid layout).
La propiedad grid-area permite nombrar elementos de la cuadrícula.
Los elementos de cuadrícula con nombre pueden ser referenciados mediante la propiedad grid-template-areas del contenedor.
Cada fila dentro de comillas simples' 'se define, separada por espacios.
.El punto (.) representa un elemento de cuadrícula sin nombre.
| Valor por defecto: | auto |
|---|---|
| Heredado: | no |
| Animación: | Soportada.Leer sobreanimatable Pruébalo |
| Versión: | Módulo de diseño de cuadrícula CSS Nivel 1 |
| Sintaxis de JavaScript: | object.style.gridTemplateAreas=". . . myArea myArea" Pruébalo |
Sintaxis
grid-template-areas: none|itemnames;
| Valor | Descripción |
|---|---|
| none | Valor por defecto, no se hace referencia a ninguna cuadrícula con nombre. |
| itemnames | Especifica cómo deben mostrarse cada columna y cada fila. |
Más ejemplos
.El punto (.) representa un elemento de cuadrícula sin nombre.Ejemplo
Pruébalo »
El siguiente ejemplo establece que "item1" abarque 2 filas y 2 columnas:
Ejemplo
Pruébalo »
Nombra todos los elementos de cuadrícula y crea una plantilla de página web:
Ejemplo
Pruébalo »
Artículos relacionados
Tutorial de CSS:CSS Grid Layout
Manual de referencia de CSS:grid-areaPropiedad
Manual de referencia de CSS:grid-templatePropiedad
Otras extensiones