Una cuadrícula de logotipos en cuadrados

 

 

 


Índice
  1. 1) marcado de cuadrícula
  2. 2) Conceptos básicos de CSS Grid
  3. 2) Hacer cuadrados reales
  4. 3) Superposición de las imágenes
  5. 4) Colocar las imágenes
  6. 5) Quirky dragging size
  7. 6) Use absolute positioning instead
  8. Video

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: Relatos Cortos

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!






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Una cuadrícula de logotipos en cuadrados

Una cuadrícula de logotipos en cuadrados

1) marcado de cuadrícula2) Conceptos básicos de CSS Grid2) Hacer cuadrados reales3) Superposición de las imágenes4) Colocar las imágenes5) Quirky dragging

programar

es

https://pseint.es/static/images/programar-una-cuadricula-de-logotipos-en-cuadrados-1400-0.jpg

2024-06-13

 

Una cuadrícula de logotipos en cuadrados
Una cuadrícula de logotipos en cuadrados

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

 

 

Update cookies preferences