Comment créer une vue en grille/carreau ?

Question

Par exemple, j'ai une classe .article, et je veux afficher cette classe sous forme de grille. J'ai donc appliqué ce style :

.article{
  width:100px;
  height:100px;
  background:#333;
  float:left;
  margin:5px;
}

Ce style donnera à l'article l'aspect d'une mosaïque ou d'une grille. Cela fonctionne bien avec une hauteur fixe. Mais si je veux régler la hauteur sur auto (s'étire automatiquement en fonction des données qu'elle contient), la grille a l'air désagréable.

Et je veux que la vue soit comme ça :

Answer 1

Ce type de mise en page est appelé Disposition de la maçonnerie . La maçonnerie est une autre disposition en grille, mais elle permet de combler les espaces blancs causés par la différence de hauteur des éléments.

jQuery Masonry est l'un des plugins jQuery permettant de créer une disposition en maçonnerie.

Vous pouvez également utiliser CSS3 column s. Mais pour l'instant, le plugin basé sur jQuery est le meilleur choix car il y a un problème de compatibilité avec la colonne CSS3.

Answer 2

Vous pouvez utiliser le système Flexbox.

1. Placez vos éléments dans un conteneur flexible à colonnes multilignes

   #flex-container {
     display: flex;
     flex-flow: column wrap;
   }

2. Réorganiser les éléments, de sorte que l'ordre du DOM soit respecté horizontalement au lieu de verticalement. Par exemple, si vous voulez 3 colonnes,

   #flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */
   #flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */
   #flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */

3. Force un saut de colonne avant le premier élément de chaque colonne :

   #flex-container > :nth-child(-n + 3) {
     page-break-before: always; /* CSS 2.1 syntax */
     break-before: always;  /* New syntax */
   }

   Malheureusement, tous les navigateurs ne prennent pas encore en charge les sauts de ligne en flexbox. Cela fonctionne sur Firefox, cependant.

   flex-container {

   display: flex; flex-flow: column wrap; }

   flex-container > :nth-child(3n + 1) { order: 1; } / 1st column /

   flex-container > :nth-child(3n + 2) { order: 2; } / 2nd column /

   flex-container > :nth-child(3n + 3) { order: 3; } / 3rd column /

   flex-container > :nth-child(-n + 3) {

   page-break-before: always; / CSS 2.1 syntax / break-before: always; / New syntax / }

   / The following is optional /

   flex-container > div {

   background: #666; color: #fff; margin: 3px; display: flex; justify-content: center; align-items: center; font-size: 36px; }

   flex-container > :nth-child(1) { height: 100px; }

   flex-container > :nth-child(2) { height: 50px; }

   flex-container > :nth-child(3) { height: 75px; }

   flex-container > :nth-child(4) { height: 50px; }

   flex-container > :nth-child(5) { height: 100px; }

   flex-container > :nth-child(6) { height: 50px; }

   flex-container > :nth-child(7) { height: 100px; }

   flex-container > :nth-child(8) { height: 75px; }

   flex-container > :nth-child(9) { height: 125px; }

   <div id="flex-container"> <div>1</div><div>2</div><div>3</div> <div>4</div><div>5</div><div>6</div> <div>7</div><div>8</div><div>9</div> </div>

Answer 3

Maintenant que CSS3 est largement disponible et compatible avec les principaux navigateurs, il est temps d'adopter une solution pure équipée de l'outil de snippet de SO :

---

Pour créer maçonnerie en utilisant CSS3, la column-count ainsi que column-gap suffirait. Mais j'ai aussi utilisé media-queries pour le rendre réactif.

Avant de plonger dans l'implémentation, veuillez considérer qu'il serait beaucoup plus sûr d'ajouter un fallback de la bibliothèque jQuery Masonry pour rendre votre code compatible avec les anciens navigateurs, en particulier IE8- :

<!--[if lte IE 9]>
    <script src="/path/to/js/masonry.pkgd.min.js"></script>
<![endif]-->

C'est parti :

.masonry-brick {
    color: #FFF;
    background-color: #FF00D8;
    display: inline-block;
    padding: 5px;
    width: 100%;
    margin: 1em 0; /* for separating masonry-bricks vertically*/
}

@media only screen and (min-width: 480px) {
    .masonry-container {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 768px) {
    .masonry-container {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 960px) {
    .masonry-container {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

<div class="masonry-container">
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
</div>

Answer 4

La meilleure option pour résoudre ce problème avec seulement du css est d'utiliser la propriété css column-count.

 .content-box {
   border: 10px solid #000000;
   column-count: 3;
 }

Vérifiez ceci pour plus d'informations : https://developer.mozilla.org/en/docs/Web/CSS/column-count

Answer 5

Avec le Module Grille CSS vous pouvez créer un assez similaire disposition.

Démonstration du CodePen

1) Définir trois colonnes de grille à largeur fixe

ul {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  ...
}

2) Assurez-vous que les éléments de grande hauteur s'étendent sur deux rangées.

li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
  grid-row: span 2;
}

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;

  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 85vh;
  margin: 4vh auto;
  border: 5px solid green;
  padding: 1rem;
  overflow: auto;
  counter-reset: item;
}
li {
  position: relative;
}
li:after {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  padding: 0.3rem;
  background: salmon;
  color: white;
  left:0;
  top:0;
}
img {
  outline: 5px solid salmon;
}
li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
  grid-row: span 2;
}

<ul>
  <li><img src="http://lorempixel.com/150/150/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/50/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/140/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/80/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/220/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/120/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/70/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/200/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/230/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/240/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/130/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/160/animals" alt="" /></li>
</ul>

Démonstration du Codepen

Les problèmes :

• Les écarts entre les éléments ne seront pas uniformes.
• Vous devez définir manuellement les éléments de grande taille ou de grande hauteur pour qu'ils s'étendent sur 2 lignes ou plus.
• Prise en charge limitée des navigateurs :)