Elemento de cuadrícula CSS
1
2
3
4
5
Elementos secundarios (artículos)
Un contenedor de cuadrícula contiene elementos de cuadrícula .
De forma predeterminada, un contenedor tiene un elemento de cuadrícula para cada columna, en cada fila, pero puede diseñar los elementos de cuadrícula para que abarquen varias columnas o filas.
La propiedad grid-column:
La grid-column
propiedad define en qué columna(s) colocar un elemento.
Usted define dónde comenzará el elemento y dónde terminará.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Nota: La grid-column
propiedad es una propiedad abreviada para el grid-column-start
y las grid-column-end
propiedades.
Para colocar un elemento, puede hacer referencia a los números de línea o usar la palabra clave "span" para definir cuántas columnas abarcará el elemento.
Ejemplo
Haga que "elemento1" comience en la columna 1 y termine antes de la columna 5:
.item1 {
grid-column: 1 / 5;
}
Ejemplo
Haga que "elemento1" comience en la columna 1 y abarque 3 columnas:
.item1 {
grid-column: 1 / span 3;
}
Ejemplo
Haga que "elemento2" comience en la columna 2 y abarque 3 columnas:
.item2 {
grid-column: 2 / span 3;
}
La propiedad de fila de cuadrícula:
La grid-row
propiedad define en qué fila colocar un elemento.
Usted define dónde comenzará el elemento y dónde terminará.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
Nota: La grid-row
propiedad es una propiedad abreviada para el grid-row-start
y las grid-row-end
propiedades.
Para colocar un elemento, puede hacer referencia a los números de línea o usar la palabra clave "span" para definir cuántas filas abarcará el elemento:
Ejemplo
Haga que "elemento1" comience en la línea de fila 1 y termine en la línea de fila 4:
.item1 {
grid-row: 1 / 4;
}
Ejemplo
Haga que el "elemento 1" comience en la fila 1 y abarque 2 filas:
.item1 {
grid-row: 1 / span 2;
}
La propiedad del área de cuadrícula
La grid-area
propiedad se puede utilizar como una propiedad abreviada para
grid-row-start
, grid-column-start
y grid-row-end
las grid-column-end
propiedades.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Ejemplo
Haga que "elemento 8" comience en la línea de fila 1 y la línea de columna 2, y termine en la línea de fila 5 y la línea de columna 6:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Ejemplo
Haga que "elemento 8" comience en la línea de fila 2 y en la línea de columna 1, y abarque 2 filas y 3 columnas:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Elementos de la cuadrícula de nombres
La grid-area
propiedad también se puede utilizar para asignar nombres a los elementos de la cuadrícula.
Encabezamiento
Menú
Principal
Correcto
Pie de página
Se puede hacer referencia a los elementos de cuadrícula con nombre mediante la grid-template-areas
propiedad del contenedor de cuadrícula.
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 {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
Cada fila está definida por apóstrofes (' ')
Las columnas de cada fila se definen dentro de los apóstrofes, separadas por un espacio.
Nota: un signo de punto representa un elemento de cuadrícula sin nombre.
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 {
grid-template-areas: 'myArea myArea
. . .';
}
Para definir dos filas, defina la columna de la segunda fila dentro de otro conjunto de apóstrofes:
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';
}
El orden de los artículos
El diseño de cuadrícula nos permite colocar los elementos en cualquier lugar que deseemos.
El primer elemento del código HTML no tiene que aparecer como el primer elemento de la cuadrícula.
1
2
3
4
5
6
Ejemplo
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
Puede reorganizar el orden para ciertos tamaños de pantalla mediante consultas de medios:
Ejemplo
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 /
span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 /
span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6
{ grid-area: 2 / 3 / 3 / 4; }
}