Comment créer une vue grille / mosaïque?

129

Par exemple, j'ai une classe .article, et je veux voir 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 au .article un aspect carrelé / quadrillé. Cela fonctionne bien avec une hauteur fixe. Mais si je veux régler la hauteur sur auto (étirement automatique en fonction des données qu'elle contient), la grille a l'air désagréable.

entrez la description de l'image ici

Et je veux faire la vue comme ceci:

entrez la description de l'image ici

css grid positioning css-float tiles Ariona Rian
la source

78

Ce type de mise en page est appelé mise en page de maçonnerie . La maçonnerie est une autre disposition de grille, mais elle remplira l'espace blanc causé par la différence de hauteur des éléments.

jQuery Masonry est l'un des plugins jQuery pour créer une mise en page de maçonnerie.

Vous pouvez également utiliser des CSS3 column. 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.

bookcasey
la source

3

Ajouté le CSS3-way ici pour rester!

behradkhodayar

27

Vous pouvez utiliser flexbox.

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

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

Réorganisez les éléments, de sorte que l'ordre 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 */

Forcer 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 dans flexbox. Cela fonctionne sur Firefox, cependant.

Afficher l'extrait de code

#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>

Développer l'extrait

Oriol
la source

Wow, c'était une vieille question. Et utiliser flexbox pour simuler la disposition de la maçonnerie n'est pas la meilleure option. Votre extrait de code ne fonctionne pas au fait: D, je pense que vous manquez le point ici. L'autre solution de contournement pour résoudre ce problème consiste à utiliser des colonnes CSS3. mais, merci pour la réponse

Ariona Rian

1

@ArionaRian Essayez l'extrait de code sur Firefox, les autres navigateurs ne prennent pas encore en charge les sauts de ligne forcés. Et oui, les colonnes CSS peuvent fonctionner aussi, mais contrairement à flexbox qui semble plus conçu pour le texte que pour la mise en page.

Oriol

Ouais, c'est ça le problème :), c'est pourquoi jusqu'à présent, nous nous en tenons toujours au plugin maçonnerie / isotope pour la mise en page de ce type de design.

Ariona Rian

Il suffit de mettre l'affichage: flex; flex-wrap: wrap; (et rien de plus) sur le conteneur, et cela fonctionne parfaitement dans Chrome, Firefox, Safari, IE11 sur Win11 et Win7. Soyez prudent avec la hauteur minimale , cependant (voir caniuse.com/#search=flex-wrap )

LBJ

@LBJ Mais alors les éléments sont disposés en lignes. Ce n'est pas le comportement souhaité ici

Oriol

11

Maintenant que CSS3 est largement disponible et compatible via les principaux navigateurs, il est temps pour une solution pure équipée de l'outil d'extrait de code de SO:

Pour créer une mise en page de maçonnerie à l' aide de CSS3 column-count, column-gapil suffirait de. Mais j'ai aussi l'habitude media-queriesde le rendre réactif.

Avant de plonger dans l'implémentation, veuillez considérer qu'il serait beaucoup plus sûr d'ajouter une bibliothèque de secours jQuery Masonry pour rendre votre code compatible avec le navigateur hérité, en particulier IE8-:

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

Et 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>

Développer l'extrait

behradkhodayar
la source

Savez-vous comment avoir un espace égal entre les éléments de la maçonnerie et le conteneur?

intcreator

5

C'est bien mais pour beaucoup de gens, il est nécessaire de COMMANDER le masonry bricks. La colonne ordonne les choses de haut en bas, la question demandait que l'ordre reste le même horizontalement, pas de basculer verticalement. Par exemple, le bloc le plus court trouvé ci-dessus DEVRAIT être dans la troisième colonne mais la ligne du haut.

jscul

4

La meilleure option pour résoudre ce problème avec uniquement css consiste à 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

Patricio Gabriel Maseda
la source

3

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/

vrbsm
la source

2

Avec le module CSS Grid, vous pouvez créer une mise en page assez similaire .

Démo CodePen

1) Définissez trois colonnes de grille de largeur fixe

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

2) Assurez-vous que les articles de grande hauteur couvrent 2 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;
}

Afficher l'extrait de code

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évelopper l'extrait

Démo Codepen

Les problèmes:

Les espaces entre les éléments ne seront pas uniformes
Vous devez définir manuellement les éléments grands / hauts pour s'étendre sur 2 lignes ou plus
Prise en charge limitée du navigateur :)

Danield
la source

1

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

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

user1978456
la source

1

Il existe un exemple basé sur la grille .

.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>

Développer l'extrait

basé sur ce code-stylo de Rachel Andrew FTW

Vladimir Ishenko
la source

Comment créer une vue grille / mosaïque?

Réponses:

Démo Codepen

Les problèmes: