Bootstrap, usar cajas flexibles para cajas de diferentes alturas

[WebSalvador]

Link: https://www.acuarel.pe/plataforma/

Hola amigos gracias por interesarse en mi problema, según el link de mi ejemplo, necesito que las cajas que contienen las fotos y la descripción se ordenan sin dejar espacios en blanco, así como esta página: https://www.lascondesperu.com/blog/donde las cajas de los blog se ordenar como si fuera una colmena.

Estoy usando Bootstrap 4 y he utilizado la opción clear, flex y no logro con mi cometido.

Este es un modelo de directorio que deseo crear, creo que con programacion se establece el position: absolute y despues se establece top y left, pero quiero hacer todo enteramente CSS

Espero me puedan apoyar, muchas gracias de antemano.

[ArturoGallegos]

Necesitas hacer uso de esta libreria javascript
https://masonry.desandro.com/

[WebSalvador]

Estoy tratando de utilizar solo bootstrap 4, y aunque ya se realizó el efecto que se realiza usando solo las clases de bootstrap, al parecer existe algo que no contemplaron los creadores, si aprecian en http://www.acuarel.pe/plataforma/ que según el tamaño de pantalla desde donde los vean: las cajas se ordenan mal, ejemplo: las cajas número 1, 2 y 3 se ordenan en la misma columna 1, es más cuando se aprecia solo dos columnas se pueden ver la caja 20 a la derecha de la caja 1, lo cual está mal.
Tengo que mencionar que bootstrap por defecto muestra solo tres columnas y yo necesito 6 u 8 y por más que use el código de la documentación de bootstrap: https://getbootstrap.com/docs/4.1/components/card/

Código PHP:

  .card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
} 
   

No funciono, y tuve que colocar mi código, ejemplo:

Código PHP:

  @media (min-width: 768px) {
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
} 
   

Que puedo hacer para resolver esto, en lo posible quisiera usar solo bootstrap, pero si bootstrap no lo hace ¿debo cambiarme de plataforma?

[ArturoGallegos]

Yo no he usado Bootstrap para hacer algo así ni tengo planes a corto plazo, pero me salta una duda con relación al código que muestras

Código CSS:

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}
 

Ese código lo pusiste donde? directo en los archivos *.css o en un archivo *.scss

La duda me surge porque he visto a mas de un programador que pretende insertar código de SASS directamente en un CSS, cosa que no va funcionar.


Sumado a que el código que dices no te funciona es propio de SASS / SCSS y el código que si te funciono es CSS