Jak utworzyć widok siatki / kafelków? [duplikować]

Question 1

Na przykład mam jakąś klasę .article i chcę zobaczyć tę klasę jako widok siatki. Więc zastosowałem ten styl:

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

Ten styl sprawi, że .article będzie wyglądać jak kafelki / siatka. Działa dobrze przy stałej wysokości. Ale jeśli chcę ustawić wysokość na automatyczną (automatycznie rozciągnij zgodnie z zawartymi w niej danymi), siatka wygląda paskudnie.

wprowadź opis obrazu tutaj

Chcę zrobić taki widok:

wprowadź opis obrazu tutaj

Question 2

Ten typ układu nazywa się układem murarskim . Mur to kolejny układ siatki, ale wypełni on białe znaki spowodowane różnicą wysokości elementów.

jQuery Masonry to jedna z wtyczek jQuery do tworzenia układu masonry.

Alternatywnie możesz użyć CSS3 column. Ale na razie wtyczka oparta na jQuery jest najlepszym wyborem, ponieważ występuje problem ze zgodnością z kolumną CSS3.

Question 3

Możesz użyć flexbox.

Umieść swoje elementy w wieloliniowym, elastycznym kontenerze

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

Zmień kolejność elementów, aby kolejność DOM była przestrzegana w poziomie, a nie w pionie. Na przykład jeśli chcesz mieć 3 kolumny,

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

Wymuś podział kolumny przed pierwszą pozycją w każdej kolumnie:
```
#flex-container > :nth-child(-n + 3) {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always;  /* New syntax */
}
```
Niestety, nie wszystkie przeglądarki obsługują jeszcze podział wiersza we flexboksie. Działa jednak w przeglądarce Firefox.

Pokaż fragment kodu

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

Rozwiń fragment

Question 4

Teraz, gdy CSS3 jest szeroko dostępny i kompatybilny z większością przeglądarek, nadszedł czas na czyste rozwiązanie wyposażone w narzędzie do fragmentów kodu SO:

Do stworzenia układu muru przy użyciu CSS3 wystarczyłoby column-countrazem z column-gap. Ale kiedyś też sprawiłem, media-queriesże będzie reagował.

Przed przystąpieniem do implementacji, proszę wziąć pod uwagę, że znacznie bezpieczniej byłoby dodać rezerwową bibliotekę jQuery Masonry, aby Twój kod był zgodny ze starszą przeglądarką, szczególnie IE8-:

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

No to ruszamy:

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

Rozwiń fragment

Question 5

Najlepszą opcją rozwiązania tego problemu przy użyciu tylko CSS jest użycie właściwości css column-count.

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

Sprawdź to, aby uzyskać więcej informacji: https://developer.mozilla.org/en/docs/Web/CSS/column-count

Question 6

Możesz użyć display: grid

na przykład:

To jest siatka z 7 kolumnami, a Twoje wiersze mają automatyczny rozmiar.

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

Aby uzyskać więcej informacji, przejdź pod następujący link: https://css-tricks.com/snippets/css/complete-guide-grid/

Question 7

Jest jeden przykład oparty na siatce .

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

Rozwiń fragment

na podstawie tego pisaka kodu autorstwa Rachel Andrew FTW

Question 8

Dzięki modułowi siatki CSS możesz stworzyć całkiem podobny układ.

Demo CodePen

1) Ustaw trzy kolumny siatki o stałej szerokości

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

2) Upewnij się, że elementy o dużej wysokości obejmują 2 rzędy

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;
}

Pokaż fragment kodu

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>

Rozwiń fragment

Codepen demo

Problemy:

Luki między przedmiotami nie będą jednolite
Musisz ręcznie ustawić duże / wysokie elementy tak, aby obejmowały 2 lub więcej rzędów
Ograniczona obsługa przeglądarki :)

Question 9

a jeśli chcesz pójść jeszcze dalej niż masonry, użyj isotope http://isotope.metafizzy.co/ to jest zaawansowana wersja masonry (opracowana przez tego samego autora) to nie jest czysty CSS, korzysta z pomocy Javascript ale jest bardzo popularny, więc znajdziesz mnóstwo dokumentów

jeśli uznasz to za bardzo skomplikowane, istnieje wiele wtyczek premium, które już oparły swój rozwój na izotopie, na przykład Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

Answer 1 · 2020-10-16 11: 28: 16Z

Na przykład mam jakąś klasę .article i chcę zobaczyć tę klasę jako widok siatki. Więc zastosowałem ten styl:

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

Ten styl sprawi, że .article będzie wyglądać jak kafelki / siatka. Działa dobrze przy stałej wysokości. Ale jeśli chcę ustawić wysokość na automatyczną (automatycznie rozciągnij zgodnie z zawartymi w niej danymi), siatka wygląda paskudnie.

wprowadź opis obrazu tutaj

Chcę zrobić taki widok:

wprowadź opis obrazu tutaj

Answer 2

Ten typ układu nazywa się układem murarskim . Mur to kolejny układ siatki, ale wypełni on białe znaki spowodowane różnicą wysokości elementów.

jQuery Masonry to jedna z wtyczek jQuery do tworzenia układu masonry.

Alternatywnie możesz użyć CSS3 column. Ale na razie wtyczka oparta na jQuery jest najlepszym wyborem, ponieważ występuje problem ze zgodnością z kolumną CSS3.

Answer 3

3

Dodano sposób CSS3 , aby zostać!

BehradKhodayar

Answer 4

Możesz użyć flexbox.

Umieść swoje elementy w wieloliniowym, elastycznym kontenerze

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

Zmień kolejność elementów, aby kolejność DOM była przestrzegana w poziomie, a nie w pionie. Na przykład jeśli chcesz mieć 3 kolumny,

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

Wymuś podział kolumny przed pierwszą pozycją w każdej kolumnie:
```
#flex-container > :nth-child(-n + 3) {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always;  /* New syntax */
}
```
Niestety, nie wszystkie przeglądarki obsługują jeszcze podział wiersza we flexboksie. Działa jednak w przeglądarce Firefox.

Pokaż fragment kodu

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

Rozwiń fragment

Answer 5

Wow, to było stare pytanie. A użycie flexboksa do symulacji układu muru nie jest najlepszym rozwiązaniem. Twój fragment nie działa tak przy okazji: D, myślę, że nie rozumiesz tutaj. Innym sposobem rozwiązania tego problemu jest użycie kolumn CSS3. ale dziękuję za odpowiedź

Ariona Rian

Answer 6

1

@ArionaRian Wypróbuj fragment kodu w przeglądarce Firefox, inne przeglądarki nie obsługują jeszcze wymuszonego łamania linii. I tak, kolumny CSS też mogą działać, ale w przeciwieństwie do flexboksa, który wydaje się być bardziej zaprojektowany dla tekstu niż dla układu.

Oriol

Answer 7

Tak, w tym problem :), Dlatego do tej pory wciąż trzymamy się wtyczki masonry / isotope przy tworzeniu tego rodzaju projektów.

Ariona Rian

Answer 8

Po prostu umieść wyświetlacz: flex; flex-wrap: wrap; (i nic więcej) na kontenerze i działa idealnie w Chrome, Firefox, Safari, IE11 na Win11 i Win7. Uważaj jednak na min-height (patrz caniuse.com/#search=flex-wrap )

LBJ,

Answer 9

@LBJ Ale wtedy elementy są ułożone w rzędy. To nie jest pożądane zachowanie tutaj

Oriol,

Answer 10

Teraz, gdy CSS3 jest szeroko dostępny i kompatybilny z większością przeglądarek, nadszedł czas na czyste rozwiązanie wyposażone w narzędzie do fragmentów kodu SO:

Do stworzenia układu muru przy użyciu CSS3 wystarczyłoby column-countrazem z column-gap. Ale kiedyś też sprawiłem, media-queriesże będzie reagował.

Przed przystąpieniem do implementacji, proszę wziąć pod uwagę, że znacznie bezpieczniej byłoby dodać rezerwową bibliotekę jQuery Masonry, aby Twój kod był zgodny ze starszą przeglądarką, szczególnie IE8-:

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

No to ruszamy:

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

Rozwiń fragment

Answer 11

Czy wiesz, jak zachować równą przestrzeń między przedmiotami w murze i pojemniku?

intcreator

Answer 12

7

To dobrze, ale dla wielu osób istnieje konieczność ZAMÓWIENIA masonry bricks. Kolumna porządkuje rzeczy z góry na dół, pytaniem było, aby kolejność pozostała taka sama w poziomie, a nie w pionie. Na przykład najkrótszy blok znaleziony powyżej POWINIEN znajdować się w trzeciej kolumnie, ale w górnym wierszu.

jscul

Answer 13

Najlepszą opcją rozwiązania tego problemu przy użyciu tylko CSS jest użycie właściwości css column-count.

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

Sprawdź to, aby uzyskać więcej informacji: https://developer.mozilla.org/en/docs/Web/CSS/column-count

Answer 14

Możesz użyć display: grid

na przykład:

To jest siatka z 7 kolumnami, a Twoje wiersze mają automatyczny rozmiar.

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

Aby uzyskać więcej informacji, przejdź pod następujący link: https://css-tricks.com/snippets/css/complete-guide-grid/

Answer 15

Jest jeden przykład oparty na siatce .

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

Rozwiń fragment

na podstawie tego pisaka kodu autorstwa Rachel Andrew FTW

Answer 16

Dzięki modułowi siatki CSS możesz stworzyć całkiem podobny układ.

Demo CodePen

1) Ustaw trzy kolumny siatki o stałej szerokości

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

2) Upewnij się, że elementy o dużej wysokości obejmują 2 rzędy

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;
}

Pokaż fragment kodu

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>

Rozwiń fragment

Codepen demo

Problemy:

Luki między przedmiotami nie będą jednolite
Musisz ręcznie ustawić duże / wysokie elementy tak, aby obejmowały 2 lub więcej rzędów
Ograniczona obsługa przeglądarki :)

Answer 17

a jeśli chcesz pójść jeszcze dalej niż masonry, użyj isotope http://isotope.metafizzy.co/ to jest zaawansowana wersja masonry (opracowana przez tego samego autora) to nie jest czysty CSS, korzysta z pomocy Javascript ale jest bardzo popularny, więc znajdziesz mnóstwo dokumentów

jeśli uznasz to za bardzo skomplikowane, istnieje wiele wtyczek premium, które już oparły swój rozwój na izotopie, na przykład Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

Jak utworzyć widok siatki / kafelków? [duplikować]

Odpowiedzi:

Codepen demo

Problemy: