Pequeños trucos geniales de CSS Grid para tu blog

1. El problema
2. Soluciones menos que ideales
3. Una solución mágica

Descubrí CSS hace aproximadamente una década mientras intentaba modificar la apariencia de un blog que había creado. Muy pronto, pude codificar cosas interesantes con características más matemáticas y, por lo tanto, más fáciles de entender, como las transformaciones. Sin embargo, otras áreas de CSS, como el diseño, siguen siendo una fuente constante de problemas.

Esta publicación trata sobre un problema que encontré hace aproximadamente una década y, hasta hace poco, no sabía cómo resolverlo de manera inteligente. Específicamente, se trata de cómo encontré una solución a un problema de larga data utilizando una técnica de cuadrícula CSS moderna que, en el proceso, me dio resultados aún mejores de los que imaginaba originalmente.

Tenga en cuenta que este no es un tutorial sobre cómo utilizar mejor la cuadrícula CSS, sino más bien un recorrido por mi propio proceso de aprendizaje.

El problema

Una de las primeras cosas que solía publicar en ese blog eran fotos aleatorias de la ciudad, así que se me ocurrió la idea de tener una cuadrícula de miniaturas con un tamaño fijo. Para una mejor apariencia, quería que esta cuadrícula estuviera alineada en el medio con respecto a los párrafos superiores e inferiores, pero, al mismo tiempo, quería que las miniaturas de la última fila estuvieran alineadas a la izquierda con respecto a la cuadrícula. Mientras tanto, el ancho de la publicación (y el ancho de la cuadrícula dentro de ella) dependería de la ventana gráfica.

El HTML se parece a esto:

section class='post__content' p!-- some text --/p div class='grid--thumbs' a href='full-size-image.jpg' img src='thumb-image.jpg' alt='image description'/ /a !-- more such thumbnails -- /div p!-- some more text --/p/section

Puede parecer simple, pero resultó ser uno de los problemas de CSS más difíciles que encontró.

Soluciones menos que ideales

Estas son cosas que he probado o visto sugeridas a lo largo de los años, pero que nunca me llevaron a ninguna parte.

Imposibilidad flotante

Los flotadores resultaron ser un callejón sin salida porque no podía entender cómo hacer que la cuadrícula estuviera alineada en el medio de esta manera.

.grid--thumbs { overflow: hidden; }.grid--thumbs a { float: left; }

La siguiente demostración muestra el intento de flotación. Cambie el tamaño de la inserción para ver cómo se comportan en diferentes anchos de ventana gráfica.

inline-blocklocura

Al principio, esta parecía una mejor idea:

.grid--thumbs { text-align: center }.grid--thumbs a { display: inline-block }

Excepto que resultó que no lo era:

En este caso, la última fila no está alineada a la izquierda.

En cierto momento, gracias a un autocompletado accidental de CSS en CodePen, descubre una propiedad llamada text-align-last, que determina cómo se alinea la última línea de un bloque.

Desafortunadamente, configurar text-align-last: leftla cuadrícula tampoco era la solución que estaba buscando:

En este punto, realmente consideré abandonar la idea de una cuadrícula alineada en el medio. ¿Podría una combinación de text-align: justifiedy text-align-last: leften la parrilla producir un mejor resultado?

Bueno, resulta que no es así. Es decir, a menos que solo haya una miniatura en la última fila y los espacios entre las columnas no sean demasiado grandes. Cambie el tamaño de la inserción a continuación para ver a qué me refiero.

Esto es más o menos donde me encontré hace dos años, después de nueve años de intentar y no poder encontrar una solución a este problema.

Trucos desordenados de flexbox

Una solución de flexbox que parecía que funcionaría al principio fue agregar un ::afterpseudoelemento en la cuadrícula y configurar flex: 1tanto las miniaturas como este pseudoelemento:

.grid--thumbs { display: flex; flex-wrap: wrap; a, ::after { flex: 1; } img { margin: auto; } :after { content: 'AFTER'; }}

La siguiente demostración muestra cómo funciona este método. He proporcionado las miniaturas y los ::aftercontornos morados del pseudoelemento para que sea más fácil ver lo que está sucediendo.

Esto no es exactamente lo que quería porque la cuadrícula de miniaturas no está alineada en el medio. Dicho esto, no se ve tan mal... siempre y cuando la última fila tenga exactamente un elemento menos de imagen que los demás. Sin embargo, tan pronto como eso cambia, el diseño se rompe si faltan más elementos o ninguno.

Esa fue una idea tramposa. Otra es no usar un pseudoelemento, sino agregar tantos divs vacíos después de las miniaturas como columnas esperamos tener.

El número esperado de columnas es algo que deberíamos poder aproximar, ya que el tamaño de las miniaturas es fijo y probablemente queramos establecer un ancho máximo para la publicación, ya que el texto que se extiende a lo ancho de una pantalla completa puede resultar visualmente agotador para los ojos. leer. Dividir el ancho máximo por el ancho fijo de la miniatura debería darnos el número máximo de columnas en este caso.

Los primeros elementos vacíos ocuparán todo el ancho de la fila que no está completamente llena de miniaturas, mientras que el resto se extenderá a otras filas. Pero como heightes cero, no importará visualmente.

Esto funciona pero, nuevamente, es complicado y todavía no produce el resultado exacto que quiero, ya que a veces termina con espacios grandes y feos entre las columnas.

¿Una solución de red?

El diseño de la cuadrícula siempre ha parecido la respuesta, dado su nombre. El problema era que todos los ejemplos que había visto hasta entonces usaban un número predefinido de columnas y eso no funciona para este patrón en particular donde el número de columnas está determinado por el ancho de la ventana gráfica.

El año pasado, mientras codificaba una colección de un elemento, patrones de fondo CSS puros, tuve la idea de generar un montón de consultas de medios que modificarían una variable CSS, --ncorrespondiente al número de columnas utilizadas para establecer grid-template-columns.

$w: 13em;$h: 19em;$f: $h/$w;$n: 7;$g: 1em;--h: #{$f*$w};display: grid;grid-template-columns: repeat(var(--n, #{$n}), var(--w, #{$w}));grid-gap: $g;place-content: center;@for $i from 1 to $n { @media (max-width: ($n - $i + 1)*$w + ($n - $i + 2)*$g) { --n: #{$n - $i} }}

De hecho, estaba muy orgulloso de esta idea en ese momento, aunque ahora me da vergüenza recordarla. Una consulta de medios para cada número de columnas posible no es exactamente ideal, sin mencionar que no funciona tan bien cuando el ancho de la cuadrícula no es igual al ancho de la ventana gráfica, pero sigue siendo algo flexible y también depende del ancho de sus hermanos. . Recetas faciles y rápidas

Una solución mágica

Finalmente encontré una mejor solución mientras trabajaba con CSS grid y no entendía por qué la repeat()función no funcionaba en una situación particular. Fue muy frustrante y me impulsó a ir a MDN, donde me di cuenta de la auto-fitpalabra clave y, aunque no entendí la explicación, tuve el presentimiento de que podría ayudar con este otro problema, así que dejé todo lo demás que estaba haciendo y lo intenté.

Esto es lo que obtuve:

.grid--thumbs { display: grid; justify-content: center; grid-gap: .25em; grid-template-columns: repeat(auto-fit, 8em);}

También descubrí la minmax()función, que se puede utilizar en lugar de tamaños fijos en elementos de la cuadrícula. Todavía no he podido entender exactamente cómo minmax()funciona, y cuanto más juego con él, menos lo entiendo, pero lo que parece que hace en esta situación es crear la cuadrícula y luego estirar sus columnas por igual hasta llenar todas del espacio disponible:

grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));

Otra cosa interesante que podemos hacer aquí es evitar que la imagen se desborde cuando es más ancha que el elemento de la cuadrícula. Podemos hacer esto reemplazando el mínimo 8emcon min(8em, 100%)Eso esencialmente asegura que las imágenes nunca excederán el 100%, pero nunca estarán por debajo de 8em. ¡Gracias a Chris por esta sugerencia!

Tenga en cuenta que la min()función no funciona en versiones anteriores a Chromium Edge.

Tenga en cuenta que esto sólo produce un buen resultado si todas las imágenes tienen la misma relación de aspecto, como las imágenes cuadradas que he usado aquí. Para mi blog, esto no fue un problema ya que todas las fotos fueron tomadas con mi teléfono Sony Ericsson W800i y todas tenían la misma relación de aspecto. Pero si elimináramos imágenes con diferentes proporciones, la cuadrícula ya no se vería tan bien:

Por supuesto, podemos establecer la imagen heighten un valor fijo, pero eso distorsiona las imágenes... a menos que establezcamos object-fiten cover, ¡lo cual resuelve nuestro problema!

Otra idea sería convertir la primera miniatura en una especie de banner que abarque todas las columnas de la cuadrícula. El único problema es que no sabemos el número de columnas porque depende de la ventana gráfica. Pero hay una solución: ¡podemos establecerla grid-column-enden -1!

.grid--thumbs { /* same styles as before */ a:first-child { grid-column: 1/ -1; img { height: 13em } }}

La primera imagen se vuelve más grande heightque todas las demás.

Por supuesto, si quisiéramos que la imagen abarcara todas las columnas excepto la última, la configuraríamos -2y así sucesivamente... ¡los índices de columna negativos existen!

auto-filles otra palabra clave de propiedad de cuadrícula que noté en MDN. Las explicaciones para ambos son largas paredes de texto sin elementos visuales, por lo que no las encontré particularmente útiles. Peor aún, reemplazar auto-fitcon auto-fillcualquiera de las demostraciones de cuadrícula anteriores no produce absolutamente ninguna diferencia. Cómo funcionan realmente y en qué se diferencian sigue siendo un misterio, incluso después de consultar artículos o jugar con ejemplos.

Sin embargo, probar diferentes cosas y ver lo que sucede en varios escenarios en un momento me llevó a la conclusión de que, si usamos un minmax()ancho de columna y no uno fijo (como 8em), entonces probablemente sea mejor usarlo auto-fillen lugar de auto-fitporque, el resultado se ve mejor si solo tenemos unas pocas imágenes, como lo ilustra la demostración interactiva a continuación:

Creo que lo que personalmente me gusta más es la idea inicial de una cuadrícula de miniaturas alineada en el medio y con un ancho de columna mayoritariamente fijo (pero que aún se usa min(100%, 15em)en lugar de solo 15emaunque). Al final del día, es una cuestión de preferencia personal y lo que se puede ver en la demostración a continuación me parece mejor:

Lo estoy usando auto-fiten esta demostración porque produce el mismo resultado auto-filly es un carácter más corto. Sin embargo, lo que no entendí al hacer esto es que ambas palabras clave producen el mismo resultado porque hay más elementos en la galería de los que necesitamos para llenar una fila.

Pero una vez que eso cambia, auto-fitse auto-fillproducen resultados diferentes, como se ilustra a continuación. Puede cambiar el justify-contentvalor y la cantidad de elementos colocados en la cuadrícula:

No estoy realmente seguro de cuál es la mejor opción. Supongo que esto también depende de las preferencias personales. Combinado con justify-content: center, auto-fillparece ser la opción más lógica, pero, al mismo tiempo, auto-fitproduce un resultado más atractivo.

Tal vez te puede interesar:

1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
2. Cambiar el tamaño de los valores en pasos en CSS
3. ¿Qué hace “revertir” en CSS?
4. CSS4 es una mala idea

Pequeños trucos geniales de CSS Grid para tu blog

El problemaSoluciones menos que idealesUna solución mágicaTal vez te puede interesar:Índice El problema

programar

es

https://pseint.es/static/images/programar-pequenos-trucos-geniales-de-css-grid-para-tu-blog-1528-0.jpg

2024-06-13

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente