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