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

Vous pouvez utiliser display : grid

par exemple :

Il s'agit d'une grille avec 7 colonnes et vos lignes ont une taille automatique.

.myGrid{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-auto-rows: auto;
      grid-gap: 10px;
      justify-items: center;
}

Pour plus de détails, accédez au lien suivant : https://css-tricks.com/snippets/css/complete-guide-grid/

Answer 2

Il y a un basé sur le réseau exemple.

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: dense;
  padding: 10px;
}

.grid-layout .item {
  padding: 15px;
  color: #fff;
  background-color: #444;
}

.span-2 {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.span-3 {
  grid-column-end: span 3;
  grid-row-end: span 4;
}

<div class="grid-layout">
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
</div>

basé sur ce code-pen par Rachel Andrew F.T.W

Answer 3

Et si vous voulez aller encore plus loin que la maçonnerie, utilisez les isotopes http://isotope.metafizzy.co/ c'est la version avancée de masonry (développé par le même auteur) ce n'est pas du pur CSS, il utilise l'aide de Javascript mais il est très populaire, donc vous trouverez beaucoup de docs

si vous trouvez cela très compliqué, il existe de nombreux plugins premium qui ont déjà basé leur développement sur isotope, par exemple les Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020