Patrones de diseño editorial con cuadrícula CSS y columnas con nombre

Muchos sitios web, en particular aquellos que muestran contenido de formato largo, tienen un patrón repetitivo de componentes bastante sencillo: un área de ancho completo para imágenes, un área de contenido central y quizás una vista dividida de dos bloques de medio ancho. Estos componentes se repiten para mostrar un artículo, imágenes y otro contenido relacionado, y los editores de contenido seleccionan el componente correcto a medida que crean artículos para su publicación.

En este artículo, voy a demostrar un enfoque de este tipo de diseño editorial, que se basa en algunas técnicas, algunas de las cuales se analizan en los siguientes artículos:

• "Rompiendo con el diseño de cuadrícula CSS"
• "Explicación de cómo romper con CSS Grid"
• "Nombrar cosas en el diseño de cuadrícula CSS"

Además de ser una buena manera de nombrar secciones de su diseño, esta técnica expone un montón de cosas interesantes sobre el diseño de cuadrícula que puede resultarle útil para crear sus propios patrones de diseño. También demuestra más de la promesa de la subcuadrícula (una parte del próximo Nivel 2 de la especificación de la cuadrícula y que se está implementando en Firefox).

Nombrar cosas en el diseño de cuadrícula CSS

Al usar CSS Grid Layout, puede nombrar líneas y áreas. Ambas cosas pueden hacer que trabajar con Grid, especialmente con grillas complejas, sea más sencillo. Definir convenciones de nomenclatura para las cosas en su diseño puede ser útil cuando trabaja con su equipo; es mucho más fácil entender dónde terminará cualquier cosa colocada con grid-area: content que tener algo colocado desde column-line: 3 / 9 .

Cuando se utiliza el enfoque grid-template-areas , se asigna un nombre a los elementos que desea colocar en la cuadrícula utilizando la propiedad grid-area y luego colocándolos alrededor de la cuadrícula. En el siguiente ejemplo, el elemento con grid-area: content entra en el área de cuadrícula definida por la propiedad grid-template-areas :

Esto funciona bien para los componentes en los que tiene un elemento para ir a un área; sin embargo, si desea colocar varias cosas en el área de contenido (una debajo de la otra), usar grid-area es el enfoque incorrecto. En su lugar, puede definir nombres para las líneas de columna y colocar el elemento desde la línea inicial hasta la final.

Sin embargo, esto no es tan claro cuando usamos el enfoque de área de cuadrícula, tenemos que conocer tanto la línea de inicio como la de finalización cuando colocamos un elemento usando grid-column grid-row ¿o sí?

Eche un vistazo a este próximo ejemplo de CodePen. Mis elementos se colocan con un único nombre o identificador mediante la propiedad grid-column , aunque algunas de las áreas de la cuadrícula a las que se dirigen cruzan varias columnas:

Mi objetivo aquí es abstraer la complejidad de la configuración de la cuadrícula cuando realmente la uso. Puedo poner mucho trabajo en la creación de la cuadrícula inicial, pero luego colocar las cosas sin pensar demasiado en ello mientras relleno mis páginas. También quiero asegurarme de que podamos repetir los componentes tantas veces como sea necesario a medida que construimos el artículo. Lo que tengo en mente es un creador de contenido que use un CMS y cree bloques de contenido usando los diferentes patrones sabiendo que se colocarán correctamente uno debajo del otro en la cuadrícula general.

Para comprender cómo llegué a este punto, es necesario comprender algunas cosas sobre el diseño de cuadrícula CSS, así como las líneas y áreas con nombre.

Podemos nombrar líneas

Como ya ha visto en mi segundo ejemplo anterior, podemos nombrar líneas en la cuadrícula que pueden ser prácticamente lo que queramos, además de la palabra span . El nombre es una identificación en lugar de una cadena, por lo que no se cita.

Sin embargo, verá muchos ejemplos en los que se utilizan las convenciones de nomenclatura name-start y name-end que -start al nombre de la línea de inicio y -end al nombre de la línea final. Esto no es puramente convencional y por la técnica voy a mostrar por qué necesitamos nombrar nuestras líneas de esta manera. Por lo tanto, debe elegir un nombre para el área que está describiendo y luego agregar los sufijos -start y -end , que deben coincidir, por supuesto.

Nombramos nuestras líneas entre corchetes. Las líneas pueden (ya menudo necesitan) tener varios nombres. En este caso, el espacio separa los nombres. Al colocar los elementos utilizando el posicionamiento basado en líneas, puede elegir cualquier nombre para la línea para realizar la ubicación.

Con nuestras líneas nombradas en su lugar, podríamos colocar nuestros elementos usando grid-column especificando el nombre de la línea inicial y final. Este patrón es igual que el uso de números de línea, por lo que el nombre antes de la barra oblicua es la línea de inicio y el nombre después es la línea final.

Esto coloca los elementos, pero no es el único nombre ordenado por elemento que usé en el ejemplo. Sin embargo, ahora tenemos todo en su lugar debido a la forma especial en que Grid maneja las áreas y líneas con nombre.

Los nombres de línea nos dan un área con nombre

Suponiendo que haya nombrado sus líneas con -start y -end como yo, Grid le dará un área con nombre del nombre principal que usó. Por lo tanto, en mi caso, tengo áreas denominadas content , start-half , end-half , full y center . Cada una de estas áreas es una sola fila (ya que no tengo filas con nombre), sin embargo, abarcará las pistas de la columna desde la línea de -start hasta la línea -end .

Las áreas con nombre nos dan una línea con nombre del nombre principal utilizado

Si queremos poder colocar nuestros elementos como si tuviéramos un nombre de columna, también debemos aprovechar el hecho de que cuando creamos un área de cuadrícula, obtenemos un nombre de línea del nombre principal utilizado; es decir, el nombre principal es el nombre con -start y -end eliminados. Este nombre de línea se resuelve en el inicio o el final del área dependiendo de si apuntamos a grid-column-start o grid-column-end .

Entonces, tenemos un área llamada content , porque tenemos líneas de columna llamadas content-start y content-end . El área denominada content también nos permite usar grid-column-start: content que se resolverá en la línea de inicio de esa área de contenido, mientras que grid-column-end: content se resolverá en la línea final del área de contenido.

Esto, por lo tanto, significa que podemos colocar un elemento en el área de contenido usando lo siguiente:

 .content { grid-column: content / content; }

A continuación, ahora podemos mejorar aún más esta técnica debido al hecho de que si usa una línea con nombre para grid-column-start y omite la línea final (en lugar de abarcar una pista como sería el caso si usara números de línea), grid copia el nombre en la línea final. Por lo tanto, grid-column: content es exactamente lo mismo que grid-column: content / content;

Esto es todo lo que necesitamos para poder colocar elementos usando grid-column con un nombre simple y único. Este comportamiento es exactamente como se especifica y no es una especie de "truco". Demuestra la profundidad de pensamiento que se invirtió en la creación de la especificación de diseño de cuadrícula y la cantidad de trabajo cuidadoso que se ha realizado para que sea tan sencillo colocar los elementos en nuestros diseños.

Dando a esta técnica superpoderes con subgrid

Creo que esta técnica es buena y permite una forma muy sencilla de declarar dónde deben colocarse los elementos en la cuadrícula. Sin embargo, si agregamos soporte de subred a la mezcla, se vuelve muy poderoso.

Actualmente, la subcuadrícula se está implementando en Firefox, por lo que estos siguientes ejemplos requieren que Firefox Nightly se ejecute. Puedes descargar Nightly aquí.

El valor de la subgrid de grid-template-columns y grid-template-rows significa que el tamaño creado en una cuadrícula principal puede optarse por un elemento que es un elemento secundario de la cuadrícula (suponiendo que también esté usando el diseño de la cuadrícula) al display: grid aplicada.

Nota : Puede leer más sobre las características de la subcuadrícula en mis artículos aquí en Smashing Magazine "CSS Grid Level 2: Here Comes Subgrid" y "Excavando en la propiedad de visualización: Grids All The Way Down".

Los nombres de línea del padre se pasan a las subcuadrículas

Además de la información de tamaño de pista que se pasa a la cuadrícula secundaria, se pasará cualquier nombre de línea establecido en el padre. Esto significa que podemos usar nuestros "nombres de columna" dentro de componentes subcuadrados, lo que hace que esta solución sea muy útil en un mundo donde subred existe. Un elemento colocado en content , incluso si está anidado dentro de las subcuadrículas, se alineará con uno colocado como elemento secundario directo de la cuadrícula principal.

En el siguiente ejemplo, he anidado dos elementos directamente dentro del div con una clase full-2 . También he colocado un ul dentro .content . Si observamos los elementos dentro full-2 , para colocarlos en la cuadrícula principal, debemos hacer que el selector full-2 sea una cuadrícula con display: grid y luego usar la propiedad grid-template-columns con un valor de subgrid .

Esto hace que la cuadrícula en .full-2 use las pistas definidas en la cuadrícula principal y tenga acceso a las líneas con nombre definidas allí. Como se trata de un elemento de ancho completo, realmente se comportará como la cuadrícula principal en términos de ubicación de nuestros elementos. Luego podemos usar cualquiera de los nombres que definimos para las diferentes columnas para colocar los elementos. En este caso, configuré ambos elementos secundarios en grid-column: center y se muestran uno tras otro en esa área central.

 .full-2 { grid-row: 4; grid-column: full; display: grid; row-gap: 10px; grid-template-columns: subgrid; } .full-2 > div { background-color: rgb(124,222,220); grid-column: center; } 

Si echamos un vistazo a nuestra ul anidada dentro de .content , necesitaremos crear una subcuadrícula en el selector .content como en el último ejemplo; cuando hacemos esto, el ul cae en la primera pista de la subcuadrícula. Si queremos diseñar los elementos de escucha en la subcuadrícula, debemos hacer dos cosas: hacer que el ul ocupe la misma área que su padre colocándolo con grid-column: content , y luego convertirlo en una cuadrícula que es una subred.

Una vez hecho esto, los elementos de la lista se distribuirán utilizando la colocación automática en las pistas de columna de la subcuadrícula:

 .content { grid-row: 1; grid-column: content; display: grid; grid-template-columns: subgrid; } .content ul { grid-column: content; display: grid; row-gap: 10px; grid-template-columns: subgrid; } 

Una vez que tenga su cuadrícula, puede usar los nombres del padre exactamente de la misma manera que antes.

 .content li:nth-child(1) { grid-column: center; } .content li:nth-child(2) { grid-column: start-half; } .content li:nth-child(3) { grid-column: end-half; } .content li:nth-child(4) { grid-column: content; } 

Si tienes Firefox Nightly, puedes ver la demostración completa en este ejemplo de CodePen:

Puede mantener las subcuadrículas "anidadas" en su estructura de marcado de esta manera, y cada vez se pasarán los nombres de las líneas. Esta es una característica que creo que será particularmente útil.

Cuando crea una subcuadrícula, los números de línea corresponden a las líneas de la subcuadrícula y no a la cuadrícula principal. Por lo tanto, si desea asegurarse de que los elementos de la subcuadrícula se alineen con la cuadrícula principal, el uso de nombres de línea o áreas con nombre (como se muestra en este ejemplo) lo hará sencillo y lógico.

Terminando

Ahora sabe cómo usar esta técnica para su cuadrícula principal y, con suerte, no pasará mucho tiempo antes de que comencemos a ver la compatibilidad con la subcuadrícula en todos los navegadores. Habilitará técnicas como esta y la hará increíblemente poderosa para que la usemos.