Otro aspecto de el rediseño de meyerweb Me gustaría explorar la forma en que uso las filas de CSS Grid para tener más flexibilidad de diseño.

Primero, visualicemos el diseño predeterminado de una página aquí en meyerweb. Se parece a esto:

¡Tan simple que incluso flexbox podría hacerlo! Pero eso es solo si las cosas siempre son así de simples. Sabía que probablemente no lo harían, porque es probable que el contenido de esas dos barras laterales varíe de una parte del sitio a otra y, en algunos casos, me gustaría que las piezas de la barra lateral se alinearan verticalmente. He aquí un ejemplo:

Ese es el diseño básico de páginas de archivo. ¿Ves cómo los Archivos de la barra lateral izquierda se alinean con la parte superior del cuadro Feeds en la barra lateral derecha? Eso es Grid para ti. Pensé en agrupar las fuentes y las categorías en la misma celda de la cuadrícula (haciéndolos así parte de la misma fila de la cuadrícula), lo que habría significado envolverlos en una <div>, pero decidió mantenerlos separados permite una mayor flexibilidad en términos de reordenación receptiva del contenido. Puedo, por ejemplo, asignar los Feeds para que los sigan los Archivos y luego las Categorías en tamaños para dispositivos móviles. O para invertir ese orden.

Más concretamente, también quería la capacidad de colocar cosas a lo largo del Fondos de las barras laterales, hacia abajo cerca del pie de página pero aún al lado de la columna de contenido principal, así:

Un prototipo de diseño inicial para los archivos del blog colocó los enlaces "Entrada siguiente" y "Entrada anterior" en algunos de esos lugares, antes de mover los enlaces al final de la columna de contenido principal. Entonces, por el momento, no tengo nada que haga uso de esos puntos, aunque la capacidad está ahí. Podría agrupar contenido en la parte superior y la parte inferior de las barras laterales, según sea necesario.

Pero aquí está lo importante, y realmente el punto de este artículo: no voy a reescribir la estructura de filas y las asignaciones de celdas de la cuadrícula para cada tipo de página. Hay una plantilla de fila unificada aplicada al body en cada página que utiliza el diseño Hamonshū. Está:

grid-template-rows: repeat(7,min-content) 1fr repeat(3,min-content);

La idea general aquí es que las primeras siete filas tienen el tamaño mínimo necesario para contener contenido dentro de esas filas. Esto también es cierto para las últimas tres filas. Y entre esos conjuntos, un 1fr fila que ocupa el resto de la altura del contenedor de rejilla, separando los dos conjuntos.

En el caso más simple, donde solo hay un encabezado, una columna de contenido principal y un pie de página, sin nada en las barras laterales (el diseño tiene tres columnas, recuerde), el contenido llenará las filas así:

Aquí está el CSS de la cuadrícula para que eso suceda:

header {grid-row: 1; grid-column: 1 / -1;}
footer {grid-row: -2; grid-column: 1 / -1;}
main {grid-row: 2; grid-column: 2;}

Por lo tanto: el encabezado llena toda la fila uno. El contenido expande la fila dos desde su ubicación en la columna central. El pie de página llena toda la última fila, que se especifica mediante grid-row: -2 (porque grid-row: -1 alinearía su parte superior con el borde inferior del contenedor de rejilla). No hay más contenido, así que todos los demás min-content las filas no tienen contenido, por lo que su altura es cero. Y no hay altura sobrante para absorber, por lo que el 1fr La fila también tiene una altura de cero. Parece que hay muchas filas especificadas sin ningún propósito real, ¿no es así?

Pero ahora, agreguemos contenido de la barra lateral a las columnas uno y tres; es decir, las barras laterales. Por ejemplo, puede recordar este diseño de antes:

Dada esta configuración, no podemos simplemente asignar la columna de contenido principal a grid-row: 2 y déjelo así, tendrá que abarcar filas. Realmente, debe abarcar todo menos el último, lo que garantiza que llegue hasta el pie de página. Entonces el CSS termina así:

header, footer {grid-row: 1; grid-column: 1/-1;}
footer {grid-row: -2;}
main {grid-column: 2; grid-row: 2/-2;}
nav {grid-row: 2; grid-column: 3;}
.archives {grid-row: 3 / span 3;}
.feeds {grid-row: 3; grid-column: 3;}
.categories {grid-row: 4; grid-column: 3;}

Y como resultado, las filas terminan así:

El primer conjunto de min-content las filas se juntan todas contra la parte inferior de la parte superior del diseño, y el segundo conjunto se empuja hacia abajo en la parte inferior. Entre ellos, el 1fr la fila se come todo el espacio sobrante, que es lo que empuja a los dos conjuntos de min-content filas separadas.

I como este patrón. Me siento bien, tener dos conjuntos de filas donde el acordeón de filas individuales se abre para aceptar contenido cuando es necesario, y colapsa a altura cero cuando no, con una fila en blanco entre los conjuntos que los separa. Es flexible e incluso me permite agregar más filas a los conjuntos sin tener que reescribir todos mis estilos de diseño.

Como ejemplo, supongamos que decidí que necesitaba agregar algunas filas más al conjunto inferior, para usar en algunas plantillas especiales. Debido a la forma en que se configuran las cosas, todo lo que tengo que hacer es cambiar la plantilla de fila de esta manera:

grid-template-rows: repeat(7,min-content) 1fr repeat(5,min-content);

Eso es todo. Acabo de cambiar el número de repeticiones en el segundo conjunto de filas. Todas las páginas existentes continuarán bien, sin cambios de diseño, sin cambios de CSS. En las pocas páginas (actualmente hipotéticas) en las que necesito poner un montón de cosas en la parte inferior de la columna de contenido principal, las conecto usando grid-row valores, ya sean positivos o negativos. Todo simplemente funciona.

Lo mismo ocurre si se agregan más filas al primer conjunto, por el motivo que sea. Todo se administra en una sola regla CSS, donde puede agregar filas para todo el sitio en lugar de tener que escribir, rastrear y mantener un montón de variantes para varios tipos de páginas. (Restar filas es más difícil sin causar alteraciones en el diseño, pero aún podría hacerse en algunos escenarios).

Como nota final, probablemente te estés preguntando: ¿es ese? 1fr fila en realidad necesario para obtener un diseño como este? No, realmente no. Vamos a sacarlo así:

grid-template-rows: repeat(11,min-content);

Como resultado, las filas que no están directamente ocupadas por el contenido (las que previamente colapsaron a altura cero), pero que aún están divididas por el contenido (la columna central), dividen el espacio sobrante del 1fr fila utilizada para consumir. Esto conduce a una situación como esta:

Para el usuario, no hay ninguna diferencia práctica. Las cosas van a los mismos lugares de cualquier manera. Solo consigue que las filas "extra" se estiren, en lugar de que las separe el 1fr fila.

Ciertamente podría haberlo dejado así, y podría decirse que hubiera sido más limpio hacerlo. Pero algo acerca de este enfoque no me sienta del todo bien; Hay un cosquilleo en el fondo de mi instinto que me dice que esto tiene una desventaja. Es cierto que podría ser un instinto vestigial de la Era de las carrozas; Sin duda tengo muchas cosas que todavía no he olvidado. Por otro lado, podría ser algo sobre Grid que he captado subconscientemente pero que aún no me he dado cuenta por completo.

Si alguna vez fijo el cosquilleo lo suficiente como para articularlo, actualizaré la publicación para incluirlo.

Gracias a kitt hodsden y laura calbag por su ayuda con este artículo.

Fuente: https://meyerweb.com/eric/thoughts/2020/07/01/accordion-rows-in-css-grid/