28172 sujets

CSS et mise en forme, CSS3

Empiler avec flex

Bonjour,

Je souhaiterai que mes blocs s'empilent les uns en dessous des autres en fonction de leur hauteur et je ne parviens pas à le faire en utilisant les class Bootstrap.
upload/1633426845-42338-blocs-min.png

Voici mon code :
 <div class="uf-container uf-page-news-article">
            <div class="uf-row">
                <div class="uf-col-md-6 uf-col-lg-4 uf-text-center">
                    <div class="uf-card-news-img">
                        <div class="uf-card-news-tag uf-text-left">
                            <a class="uf-bg-orange uf-text-white uf-border-rounded-6">Lorem ipsum</a>
                        </div>
                        <img src="images/visuels/visuel-11.jpg" class="uf-img-fluid uf-border-rounded" alt="">
                        <div class="uf-card-news-content uf-text-center">
                            <a href="blog-detail-one.html" class="uf-card-news-link uf-text-white">Integer lorem dolor, faucibus sed consectetur quis lobortis at nisi</a>
                        </div>
                    </div>
                </div>

                <div class="uf-col-md-6 uf-col-lg-4 uf-text-center">
                    <div class="uf-card-news-img">
                        <div class="uf-card-news-tag uf-text-left">
                            <a class="uf-bg-yellow uf-text-white uf-border-rounded-6">Lorem</a>
                        </div>
                        <img src="images/visuels/visuel-10.jpg" class="uf-img-fluid uf-border-rounded" alt="">
                        <div class="uf-card-news-content uf-text-center">
                            <a href="blog-detail-one.html" class="uf-card-news-link uf-text-white">Integer lorem dolor, faucibus sed consectetur quis lobortis at nisi</a>
                            <div class="uf-card-news-author uf-text-left">
                                <span class="uf-text-white">David Patiashvili, le 15/06/2021</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="uf-col-md-6 uf-col-lg-4 uf-text-center">
                    <div class="uf-card-news-img">
                        <div class="uf-card-news-tag uf-text-left">
                            <a class="uf-bg-green uf-text-white uf-border-rounded-6">Faucibus sed consectetur quis</a>
                        </div>
                        <img src="images/visuels/visuel-6.jpg" class="uf-img-fluid uf-border-rounded" alt="">
                         <div class="uf-card-news-content uf-text-center">
                            <a href="blog-detail-one.html" class="uf-card-news-link uf-text-white">Integer lorem dolor, faucibus sed consectetur quis lobortis at nisi</a>
                        </div>
                    </div>
                </div>
</div>
</div>


Peut-on faire ça simplement en bootstrap ?

Merci par avance. Smiley biggol
Modérateur
Salut !

Ah le fameux Masonry style que tout le monde aimerait avoir aussi simplement que display:masonry; ... malheureusement, a ma connaissance, il faut passer par un script Js pour pouvoir faire ça. Ou alors faire quelques concessions sur la taille des div pour que ça "tombe bien"... problème compliqué je vais suivre ce fil ca fait longtemps que j'ai pas testé !


[EDIT] Je me souvient d'une solution à base de column-count https://developer.mozilla.org/fr/docs/Web/CSS/column-count le rendu est vraiment pas mal mais le soucis avec ça c'est que les post sont rangé dans un ordre un peu gênant : sur 6 post par exemple on va avoir le 1 et 2 dans la premiere colonne, 3 et 4 dans la seconde et 5 et 6 dans la dernière. Ils ne sont pas rangé par ordre d'apparition quoi et ca peut déranger pour un blog d'avoir ses 20 premiers post en une seule colonne puis les 20 suivant a coté etc..
Modifié par _laurent (05 Oct 2021 - 12:27)
J'aurais exactement dit ce que vient d'écrire Laurent.

Pour la solution avec Flex, voici une démo que j'avais faite il a quelques temps : https://codepen.io/olivier-c/pen/KNvVMq

En attendant une solution native avec grid layout qui devrait sortir prochainement (déjà disponible sous Firefox avec un flag), mais qui ne sera pas exploitable en production avant quelque temps : https://twitter.com/jensimmons/status/1257440127032397829
Modifié par Olivier C (06 Oct 2021 - 03:54)
Désolé, les intervenants ne reçoivent pas de notifications à partir du forum, je n'ai pas vu votre post.

Tout le secret est ici :
.masonry > * { /* la classe est posée sur un élément parent */
  display: inline-block;
  width: 100%;
  margin: 0 0 1.5rem;
  padding: 0 1em;
  box-sizing: border-box;
}

.masonry { /* pour les marges */
  margin: 1.5rem 0;
  column-gap: 1.5rem;
}

Ensuite, il suffit de déterminer le nombre de colonnes que l'on souhaite en fonction des points de ruptures que l'on définit. Exemple :
@media (min-width: 36.01rem) {
  .masonry {
    column-count: 2;
  }
}
@media (min-width: 65.01rem) {
  .masonry {
    column-count: 3;
  }
}
@media (min-width: 90.01rem) {
  .masonry {
    column-count: 4;
  }
}

Modifié par Olivier C (18 Oct 2021 - 08:35)
Sujet clos
Aller à