1

Pues eso, busco alguna manera de crear tres elementos horizontales con un aspect ratio de 1:1.

Hago énfasis en que agregar la misma cantidad de píxeles al width y al height no es la respuesta a mi pregunta puesto que a medida que añadas contenedores horizontales, tienes que cambiar el código. Eso solo hace el código sucio, inútil y para nada responsive.

Os pongo un ejemplo de lo que busco:

section {
 display: flex
}

.a {
 background: red
}

.b {
 background: green
}

.c {
 background: blue
}

.a, .b, .c {
 height: 100px; /* ¿qué valor agregar aquí? */
 width: calc(100%/3)
}
<section>
 <div class="a"></div>
 <div class="b"></div>
 <div class="c"></div>
</section>

10
  • 2
    Dándole al contenedor los mismos píxeles de alto que de ancho.
    – phpMyGuel
    el 2 sep. 2020 a las 21:31
  • 2
    Sí, existen varias maneras, ¿Qué has intentado? el 4 sep. 2020 a las 15:31
  • @phpMyGuel, si quieres crear contenedores horizontales con el mismo alto que ancho, no puedes pretender simplemente ponerle los mismos píxeles porque primero, no está siendo responsive y segundo, si quieres añadir otro contenedor horizontal tienes que modificar el estilo de cada uno de los contenedores.
    – user128841
    el 4 sep. 2020 a las 21:43
  • @JheymanMejia, pues lo primero que se me vino a la cabeza fue utilizar la propiedad width: calc(100%/3) pero al agregar posteriormente height: calc(100%/3), me saca el cálculo de otro contenedor, no dando un aspect ratio de 1:1.
    – user128841
    el 4 sep. 2020 a las 21:45
  • 2
    El ejemplo que pones no es aspect ratio 1:1, para meter cuadritos de forma horizontal y que sea responsive necesitarás mucho cálculo y trucos CSS o JS. Saludos el 8 sep. 2020 a las 7:10

1 respuesta 1

4

Ya que la pregunta, después de sus ediciones, aporta datos suficientes para poder dasarrollar una respuesta adecuada. Aquí subo mi solución:

La magia la aportan dos cosas:

  • Uso de display: grid.
  • Uso del pseudoelemento ::before.

Con display-grid y a través de la propiedad grid-template-columns: 1fr 1fr 1fr podemos establecer que los elementos de nuestro contenedor se distribuyan de tal manera que formen 3 columnas del mismo tamaño y a través de padding-bottom: 100% en el ::before conseguimos que cada columna tenga la misma altura que anchura.

.container {
  display: grid;
  grid-gap: 5px;
}

.container div {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.container div::before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
}

.tres-elementos {
  grid-template-columns: 1fr 1fr 1fr;
}

.tres-elementos div {
  background-color: red;
}

.cuatro-elementos {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.cuatro-elementos div {
  background-color: blue;
}
<p>Con tres elementos</p>
<div class="container tres-elementos">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
</div>

<p>Con cuatro elementos</p>
<div class="container cuatro-elementos">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
  <div>Elemento 4</div>
</div>

De esta manera, si quisieras crear un contenedor que albergase 5 columnas lo único que tendrías que hacer sería crear una clase con la propiedad grid-template-columns: 1fr 1fr 1fr 1fr 1fr; y añadírsela a dicho contenedor (además de el <div> adicional para la quinta columna).

1
  • 1
    Muchas gracias, justo la solución que buscaba.
    – user128841
    el 10 sep. 2020 a las 18:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.