Accentsconagua
Share
En uno de nuestros tutoriales de introducción a CSS Grid, vimos columnas fluidas y mejores canales. Aprendimos que no es necesario especificar exactamente dónde queremos colocar nuestros elementos de la cuadrícula; Si declaramos las propiedades de nuestra cuadrícula, Grid colocará nuestros artículos de acuerdo con su algoritmo de colocación automática..
En este tutorial veremos cómo funciona ese algoritmo y cómo podemos influenciarlo..
Si su navegador no está configurado para admitir Grid, deberá resolverlo para seguirlo. Lee esto:
Aquí hay una cuadrícula de demostración para poner en marcha las cosas; Es un contenedor que hemos declarado ser. pantalla: rejilla; y tiene dieciocho elementos hijos. Hemos declarado que debería tener cinco columnas, cada una de igual ancho, al menos la misma cantidad de filas y un canal estrecho en todas las 2px.
cuadrícula-plantilla-columnas: repetir (5, 1fr); cuadrícula-plantilla-filas: repetir (5, 1fr); rejilla: 2px;
Hasta ahora todo bien, y puedes ver que Grid ha tomado nuestros dieciocho artículos y los ha empujado, trabajando desde la parte superior izquierda, moviéndose hacia la derecha, luego avanzando fila por fila. Este comportamiento es muy parecido a la forma en que funcionan los flotadores..
Nota: el comportamiento de izquierda a derecha se revertiría si tratáramos con una dirección: RTL; diseño.
Todo eso es agradable y limpio, pero veamos qué sucede cuando nuestros artículos no encajan tan perfectamente. A .item-7 agregaremos algunas reglas para agrandarlo al abarcar dos columnas y dos filas:
.item-7 background: # e03f3f; cuadrícula-columna: span 2; fila de la cuadrícula: span 2;
Como se ve eso ahora?
No está mal! .item-7 se llena mas espacio, asi que .item-8 y .item-9 se colocan más lejos sobre. .item-10 Luego mira para ver si hay un espacio vacío al lado de .item-9, y cuando ve no se mueve. abajo una fila y comienza de nuevo en el extremo izquierdo. Los otros artículos continúan metidos de la misma manera..
Pero espera, ¿y si también hacemos .item-9 un poco sobrepeso?
Ahora se pone interesante; .item-9 ya no encaja en la columna al final, por lo que se empuja hacia abajo a la siguiente fila. Como no cabe en nada más allá de .item-7 se queda quieto. .item-10, Usted podría imaginar, se metería debajo. .item-6 de nuevo, pero, si lo recuerdas, busca una columna vacía, y luego falla que se mueve abajo una fila y se desvía hacia la izquierda otra vez. Este es un concepto importante para comprender.
Si miras la demo anterior verás que .item-18, al no encontrar espacio al lado de .item-17, se ha movido hacia abajo una fila. En realidad, solo definimos cinco filas, pero Grid ha asumido que querremos otra fila para seguir adelante. Esto se debe a flujo de rejilla automático, que pertenece al elemento de cuadrícula y cuyo valor predeterminado es fila. Podemos cambiar este valor a columna Si queremos, lo que alteraría totalmente el aspecto de nuestra cuadrícula:
Esto se ve tipo de similar, pero notará que nuestros artículos se han colocado en la parte superior izquierda, luego se movieron hacia abajo para llenar cada fila, luego se movieron hacia la segunda columna y así sucesivamente. Así que ahora, cuando un elemento es demasiado grande para sus botas, el siguiente elemento busca el siguiente espacio de fila vacante y, a continuación, falla y pasa a la siguiente columna.
Podemos agregar otra palabra clave a nuestro flujo de rejilla automático propiedad, y posiblemente sea mi palabra clave favorita de CSS hasta la fecha: denso. Su contraparte por defecto es escaso (mi segundo favorito). Vamos a hacer lo siguiente:
rejilla-auto-flujo: fila densa;
Nota: no necesitamos incluir fila Aquí está implícito, pero esto resalta cómo funciona la sintaxis..
Ahora nuestro amigo .item-10, al encontrar que no hay espacio al lado de .item-9, primero verifica que es encima antes de pasar a otra fila.
Gracias a este cambio en el algoritmo de colocación, nuestros artículos ahora están densamente empaquetados, lo que nos brinda una cuadrícula más eficiente. Sin embargo, esto significa que el diseño visual no necesariamente refleja el orden de origen del documento, lo que puede no ser siempre útil para el usuario..
Recapitulemos:
flujo de rejilla automático desde fila a columna.flujo de rejilla automático acepta una palabra clave para describir el enfoque de "embalaje". Por defecto este valor es escaso, pero podemos alterar esto para denso que intenta llenar todos los huecos disponibles.