pienso áreas de cuadrícula con nombre en CSS Grids como azúcar sintáctico para traer su propio azúcar. No los necesita absolutamente (podría expresar la ubicación de la cuadrícula de otras maneras), pero puede hacer que esa ubicación sea más intuitiva. Y, oye, si me equivoco en eso, corrígeme en los comentarios.
Supongamos que configura una cuadrícula de 3 columnas:
.grid {
display: grid;
grid-gap: 1rem;
grid-template-columns:
200px 1fr 1fr;
}No hay filas definidas allí; esos están implícitos y aparecerán según sea necesario. Podríamos definirlos, simplemente no lo somos, porque como la mayoría de las situaciones en el diseño web, no nos importa qué tan altos sean los elementos; la altura aumentará según sea necesario para acomodar el contenido.
Ahora, ¿cómo colocamos algo en esa posición en la parte superior izquierda de la cuadrícula? Podríamos decirle a la cuadrícula que lo coloque allí así:
.item {
grid-column: 1 / 2; /* start at the first grid column line and end at the second */
}Eso funciona, aunque eso .item mejor ser el primer hijo de .grid. De lo contrario, se puede colocar implícitamente algo más allí y .item bajará a la siguiente fila abierta. Si quisiéramos estar muy seguros de colocarlo en la parte superior izquierda, también podríamos hacer la fila:
.item {
grid-column: 1 / 2;
grid-row: 1 / 2;
}Ahora seguramente estará en la parte superior izquierda, incluso si otros elementos se colocan explícitamente allí (simplemente se superpondrán). Incluso podemos acortar las cosas con el grid-area propiedad:
.item {
grid-area: 1 / 1 / 2 / 2;
}Todos esos 1 y 2 pueden ser lo suficientemente intuitivos por ahora, pero los números se vuelven un poco mucho en cuadrículas más complejas que involucran la ubicación de columnas y filas.
Mira esto. Mientras definimos las columnas, podemos nombrarlas con una propiedad separada:
.grid {
display: grid;
grid-gap: 1rem;
grid-template-columns:
200px 1fr 1fr;
grid-template-areas:
"pro a b"
"pro c d";
}Cada grupo citado en grid-template-areas es una fila. Dentro hay nombres que acabo de inventar. Podría ser casi cualquier cosa, siempre que tenga sentido para usted. ¿Ves cómo la palabra “pro” se repite dos veces en dos filas? Eso es importante, ya que está diciendo que podríamos colocar un elemento de la cuadrícula donde está ese valor “pro” y estará en la primera de tres columnas y abarcará dos filas. Bastante intuitivo, ¿no?
Lo colocamos así:
.pro-features {
/* rather than */
grid-area: 1 / 1 / 2 / 3;
/* we can now do */
grid-area: pro;
}Aquí está ese simple ejemplo:
Consulte las áreas de cuadrícula con nombre simples de Pen de Chris Coyier (@chriscoyier) en CodePen.
¿Quieres ser aún más descriptivo con una cuadrícula? Intente dibujarlo en sus comentarios CSS.