Elementos hijo (Items)
Un contenedor grid contiene elementos grid.
De forma predeterminada, un contenedor tiene un elemento grid para cada columna, en cada fila, pero puedes diseñar los elementos grid para que abarquen varias columnas y/o filas.
La propiedad grid-column
La propiedad grid-column define en qué columna(s) colocar un elemento.
Usted define dónde comenzará el item y dónde terminará el item.
Nota: La propiedad
grid-columnes una propiedad abreviada de las propiedadesgrid-column-startygrid-column-end.
Para colocar un elemento, puede consultar los números de línea o utilizar la palabra clave span para definir cuántas columnas abarcará el elemento.
Ejemplo:
Haga que "item1" comience en la columna 1 y termine antes de la columna 5:
.item1 {
grid-column: 1 / 5;
}
Ejemplo:
Haz que "item1" comience en la columna 1 y abarque 3 columnas:
.item1 {
grid-column: 1 / span 3;
}
Ejemplo:
Haz que "item2" comience en la columna 2 y abarque 3 columnas:
.item2 {
grid-column: 2 / span 3;
}
La propiedad grid-row
La propiedad grid-row define en qué fila colocar un elemento.
Usted define dónde comenzará el item y dónde terminará el item.
Nota: La propiedad
grid-rowes una propiedad abreviada para las propiedadesgrid-row-startygrid-row-end.
Para colocar un elemento, puedes consultar los números de línea o utilizar la palabra clave span para definir cuántas filas abarcará el elemento:
Ejemplo:
Haz que "item1" comience en la línea de fila 1 y termine en la línea de fila 4:
.item1 {
grid-row: 1 / 4;
}
Ejemplo:
Haz que "item1" comience en la fila 1 y abarque 2 filas:
.item1 {
grid-row: 1 / span 2;
}
La propiedad grid-area
La propiedad grid-area se puede utilizar como propiedad abreviada para las propiedades grid-row-start, grid-column-start, grid-row-end y grid-column-end.
Ejemplo:
Haz que "item8" 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:
Haz que "item8" 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;
}
Nombrar elementos Grid
La propiedad grid-area también se puede utilizar para asignar nombres a los elementos de grid.
Se puede hacer referencia a los elementos de la cuadrícula con nombre mediante la propiedad grid-template-areas del contenedor de la 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 la 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:
Nombra todos los elementos y crea 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 items
El diseño de cuadrícula nos permite colocar los elementos en cualquier lugar que queramos.
El primer elemento del código HTML no tiene por qué siempre aparecer como el primer elemento de la cuadrícula.
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; }
Ejemplo:
También puedes reorganizar el orden para ciertos tamaños de pantalla mediante media queries:
@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; }
}
Traducido con 💚 desde W3Schools.com