Una cuadrícula de logotipos en cuadrados

Construyamos una cuadrícula literal de cuadrados y colocaremos los logotipos de algunas revistas centrados dentro de cada cuadrado. Me imagino que muchos de ustedes habrán tenido que crear una cuadrícula de logotipos antes. Probablemente ya puedas imaginarlo: un área de un sitio que enumera los donantes, patrocinadores o que muestra todas las grandes empresas sofisticadas que utilizan algún producto. Poner los logotipos en cuadrados es una forma decente de manejarlo, ya que fuerza una estructura limpia entre los logotipos que tienen diferentes tamaños, relaciones de aspecto y pesos visuales, lo que puede volverse delicado y parecer descuidado.

Por “cuadrícula” me refiero a la cuadrícula CSS. Configurar una cuadrícula de cuadrados (flexibles) es un pequeño truco en sí mismo. Luego colocaremos esos logotipos allí de manera que mantengan su tamaño y centrados. Al final, veremos una pequeña rareza.

1) marcado de cuadrícula

¿Alguna vez has probado esto en un editor que admita Emmet?

.griddiv*5img

Luego presione tabulador . Se expandirá a:

div  divimg src=""/div  divimg src=""/div  divimg src=""/div  divimg src=""/div  divimg src=""/div/div

Sólo un pequeño truco para trabajar rápido.

2) Conceptos básicos de CSS Grid

Usaremos la infame técnica de columnas flexibles:

.grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  grid-gap: 1rem;}

Eso nos dará no sólo columnas flexibles, sino también un número flexible de columnas. Recuerde, realmente no nos importa cuántas columnas haya; simplemente estamos creando una cuadrícula de logotipos para mostrar.

Si le damos a cada uno de esos divs de elementos de la cuadrícula un fondo y una altura forzada, veríamos algo como:

2) Hacer cuadrados reales

En lugar de forzar los elementos de la cuadrícula a una altura particular, usemos un truco de relación de aspecto. Colocaremos un pseudoelemento vacío allí, lo que padding-bottom: 100%;significa que obligará a que la altura sea al menos tan alta como ancha.

.grid  div {  background: black;  padding: 1rem;}.grid  div::before {  content: "";  padding-bottom: 100%;  display: block;}

Si ocultamos temporalmente las imágenes, verás que la cuadrícula de rectángulos se ha convertido en una cuadrícula de cuadrados perfectos:

3) Superposición de las imágenes

Pero con las imágenes ahí, se vuelven un poco oblongas porque la imagen se asienta en el pseudoelemento.

Necesitaremos una manera de sentarlos uno encima del otro. Por lo general, con las técnicas de relación de aspecto, alcanzamos el posicionamiento absoluto para colocar el contenedor interno para cubrir la forma ahora con relación de aspecto. Pero como de todos modos ya estamos usando grid, usemos grid nuevamente para colocar los elementos en el mismo espacio:

.grid  div {  /* ... */  display: grid;}.grid  div::before,.grid  div  img {  grid-area: 1 / 1 / 2 / 2;}

Eso significa convertir los elementos de la cuadrícula principal también en contenedores de cuadrícula, sin filas ni columnas explícitas, y luego colocar tanto el pseudoelemento como la imagen en la primera fila y columna de esa cuadrícula. Esto los obligará a superponerse, formando nuevamente una bonita cuadrícula de cuadrados.

4) Colocar las imágenes

Let’s plop a proper src in there for each image. If we make sure the images fill the space (and limit themselves) with width: 100%, we’ll see them along the top of the grid items:

Not terrible, but we would prefer to see them centered. Here’s one trick to do that. First, we’ll also make their height: 100%, which distorts them:

Then fix that up with object-fit!

.grid  div  img {  width: 100%;  height: 100%;  object-fit: contain;}

There we go:

That will work responsively:

5) Quirky dragging size

This (probably) isn’t a massive deal, but notice how the logos look when you drag them off (like a user might if they are trying to save one):

The images look like they have width: 100%; height: 100%; without the object-fit: contain;.

Here’s the working demo so far, with that quirk:

6) Use absolute positioning instead

If that dragging quirk is a big deal, we can always just absolutely position the images inside the grid children instead.

Here’s one way, assuming the grid child div is position: relative;:

.grid  div  img {  position: absolute;  max-width: 100%;  top: 0;  bottom: 0;  right: 0;  left: 0;  margin: auto;}

And here’s another:

.grid  div  img {  position: absolute;  max-width: 100%;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

Either of those fix that dragging quirk. Here’s a demo:

Video

If you’d like to watch a video walkthrough of all this, here ya go!