Propiedad de área de cuadrícula CSS
Ejemplo
Haga que "elemento1" comience en la columna 1 de la fila 2 y abarque 2 filas y 3 columnas:
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La grid-area
propiedad especifica el tamaño y la ubicación de un elemento de cuadrícula en un diseño de cuadrícula y es una propiedad abreviada para las siguientes propiedades:
La grid-area
propiedad también se puede utilizar para asignar un nombre a un elemento de cuadrícula. A continuación, se puede hacer referencia a los elementos de cuadrícula con nombre mediante la
propiedad grid-template-areas del contenedor de cuadrícula. Vea los ejemplos a continuación.
Valor por defecto: | coche / coche / coche / coche |
---|---|
Heredado: | No |
Animable: | si. Leer sobre animable |
Versión: | Módulo de diseño de cuadrícula CSS Nivel 1 |
Sintaxis de JavaScript: | objeto .style.gridArea="1 / 2 / tramo 2 / tramo 3" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
grid-area | 57 | 16 | 52 | 10 | 44 |
Sintaxis CSS
grid-area: grid-row-start / grid-column-start / grid-row-end /
grid-column-end | itemname;
Valores de propiedad
Value | Description |
---|---|
grid-row-start | Specifies on which row to start displaying the item. |
grid-column-start | Specifies on which column to start displaying the item. |
grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
itemname | Specifies a name for the grid item |
Más ejemplos
Ejemplo
Item1 recibe el nombre "myArea" y abarca las cinco columnas en un diseño de cuadrícula de cinco columnas:
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
Ejemplo
Deje que "myArea" abarque dos columnas en un diseño de cuadrícula de cinco columnas (los signos de punto representan elementos sin nombre):
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea . . .';
}
Ejemplo
Haz que "item1" abarque dos columnas y dos filas:
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea
myArea . . .';
}
Ejemplo
Asigne un nombre a todos los elementos y cree una plantilla de página web lista para usar:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 {
grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area:
footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main
main main right right'
'menu footer footer footer footer
footer';
}
páginas relacionadas
Tutorial de CSS: diseño de cuadrícula CSS