Una cuadrícula de logotipos en cuadrados | Programar Plus

Construyamos una cuadrícula literal de cuadrados y colocaremos los logotipos de algunas revistas centrados dentro de cada cuadrado. Imagino que muchos de ustedes han tenido que construir una cuadrícula de logotipos antes. Probablemente ya pueda imaginarlo: un área de un sitio que enumera los donantes, patrocinadores o que muestra todas las grandes empresas de lujo que usan algún producto. Poner los logotipos en cuadrados es una forma decente de manejarlo, ya que obliga a una estructura limpia entre los logotipos que son de diferentes tamaños, relaciones de aspecto y pesos visuales, que pueden volverse quisquillosos y verse descuidados.

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 una manera que los mantenga centrados y de tamaño. Al final, veremos una pequeña rareza.

1) Marcado de cuadrícula

¿Alguna vez ha probado esto en un editor compatible con Emmet?

.grid>div*5>img

Entonces presione pestaña. Se expandirá a:

<div class="grid">
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
</div>

Solo 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 solo columnas flexibles, sino un número flexible de columnas. Recuerde, realmente no nos importa cuántas columnas haya, solo estamos construyendo una cuadrícula de logotipos para mostrar.

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

Esta captura de pantalla tiene un ancho principal de aproximadamente 800 px. Las tres columnas que se ven aquí aumentarán y disminuirán para llenar el espacio, gracias a esa magia de cuadrícula.

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 pseudo-elemento vacío allí con padding-bottom: 100%; lo que significa que forzará la altura a ser 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á que la cuadrícula de rectángulos se ha convertido en una cuadrícula de cuadrados perfectos:

3) Superposición de imágenes

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

Necesitaremos una forma de colocarlos uno encima del otro. Por lo general, con las técnicas de relación de aspecto, buscamos un posicionamiento absoluto para colocar el contenedor en el niño para cubrir la forma ahora con relación de aspecto. Pero como ya estamos usando la cuadrícula de todos modos, usemos la cuadrícula 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 dice que convierta los elementos de la cuadrícula de la cuadrícula principal también en contenedores de cuadrícula, sin filas y 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 superponerlos, formando nuevamente una bonita cuadrícula de cuadrados.

4) Colocación de las imágenes

Dejemos un buen src allí para cada imagen. Si nos aseguramos de que las imágenes llenen el espacio (y se limiten) con width: 100%, los veremos en la parte superior de los elementos de la cuadrícula:

No es terrible, pero preferiríamos verlos centrados. Aquí hay un truco para hacer eso. Primero, también haremos su height: 100%, que los distorsiona:

Entonces arregla eso con object-fit!

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

Aquí vamos:

Eso funcionará de manera receptiva:

5) Tamaño de arrastre peculiar

Esto (probablemente) no es un gran problema, pero observe cómo se ven los logotipos cuando los arrastra (como lo haría un usuario si intenta guardar uno):

Las imágenes se ven como si tuvieran width: 100%; height: 100%; sin el object-fit: contain;.

Aquí está la demostración funcional hasta ahora, con esa peculiaridad:

6) Utilice posicionamiento absoluto en su lugar

Si esa peculiaridad de arrastrar es un gran problema, siempre podemos colocar absolutamente las imágenes dentro de los elementos secundarios de la cuadrícula.

Aquí hay una forma, asumiendo que el div secundario de la cuadrícula es position: relative;:

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

Y aquí hay otro:

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

Cualquiera de los dos arregla esa peculiaridad de arrastre. Aquí tienes una demostración:

Video

Si desea ver un tutorial en video de todo esto, ¡aquí tiene!