Digamos que estamos trabajando en la página de inicio de un sitio web de noticias. Probablemente esté acostumbrado a ver contenido basado en tarjetas en un diseño de cuadrícula, ¿verdad? He aquí un ejemplo clásico, The New York Times:
Si algo como eso.
Habrá algunas tarjetas/elementos/cajas/lo que sea que necesite ocupar más espacio que otras. Me viene a la mente un artículo destacado.
CSS Grid sería ideal aquí porque estamos trabajando en dos direcciones: filas y columnas. Además, tiene esta función incorporada que coloca automáticamente elementos en la cuadrícula según el espacio disponible. Si tuviéramos que definir simplemente la cuadrícula en el elemento principal y nada más, a cada elemento secundario se le asignarían espacios iguales de acuerdo con la cantidad de espacio disponible tanto en las columnas como en las filas.
En otras palabras, no hay necesidad de ser estricto o explícito en dónde le decimos a nuestra cuadrícula que coloque los elementos.
Un sitio de periódico realmente puede beneficiarse de esto. Tal vez el número de artículos en la página varíe. Tal vez se muestren anuncios en algunas situaciones pero no en otras. Incluso si el contenido es impredecible, CSS Grid puede hacer que el diseño sea predecible al hacer que los elementos fluyan automáticamente en su lugar.
Tener nueve historias que encajen perfectamente sería genial, pero tal vez solo tengamos ocho algún día. Bueno, CSS Grid nos tiene cubiertos para asegurarnos de que los elementos fluyan en las celdas de manera uniforme.
Donde las cosas pueden ponerse un poco complicadas es cuando tenemos elementos que abarcan varias filas o columnas. Volvamos a la idea del artículo destacado y estipule que debe abarcar las dos últimas columnas de una fila.
.article--featured {
grid-column: 2 / span 2;
}Es posible que tengamos seis artículos un día porque, nuevamente, nuestro contenido es un poco impredecible.
<div class="articles">
<div class="article">1</div>
<div class="article">2</div>
<div class="article">3</div>
<div class="article--featured">4</div>
<div class="article">5</div>
<div class="article">6</div>
</div>¡No hay problema! Esperamos que la función de ubicación automática de Grid funcione en torno a ese artículo destacado para nosotros. Pero cuando colocamos ese artículo destacado allí, esto es lo que obtenemos:
Hmm, eso no es lo que teníamos en mente. Sería mucho mejor si los cinco artículos fluyeran alrededor del artículo destacado.
Lo que realmente está pasando es que Grid toma la ubicación explícita del artículo destacado y lo coloca donde haya suficiente espacio disponible para él. ocupar la segunda y tercera columna después de los artículos que la preceden en la fuente. Da la casualidad de que es la segunda fila y da la casualidad de que hay un espacio vacío delante de ella porque no hay otros artículos que la precedan en el HTML. Grid coloca el artículo destacado como se cuenta y fluye el resto de los elementos en consecuencia.
Podemos obligar a Grid a ignorar el orden de origen y hacer fluir el siguiente elemento disponible a su alrededor, incluso si está después del artículo destacado en el HTML.
¿Cuál es la pepita mágica con tales poderes? auto-flow: dense!
.articles {
display: grid;
grid-auto-flow: dense;
grid-gap: 1em;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 1fr);
}¡Aquí vamos! Ahora podemos estar seguros de que nuestro diseño permanecerá intacto, independientemente de la cantidad de contenido que se arroje a la cuadrícula.