Як створити перегляд сітки / плитки?

129

Наприклад, у мене є якийсь клас .article, і я хочу розглядати цей клас як сітковий вигляд. Тому я застосував цей стиль:

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

Цей стиль зробить .частину виглядати плиткою / сіткою. Це добре працює з фіксованою висотою. Але якщо я хочу встановити висоту на автоматичну (автоматично розтягується відповідно до даних всередині неї), сітка виглядає неприємно.

введіть тут опис зображення

І я хочу зробити погляд таким:

введіть тут опис зображення

— Аріона Ріан
джерело

78

Цей тип компонування називається макетом кладки . Кладка - це ще одна сітка сітки, але вона заповнить пробіл, викликаний різницею висоти елементів.

jQuery Masonry - один з плагінів jQuery для створення макета кладки.

Крім того, ви можете використовувати CSS3 columns. Але поки що плагін на основі jQuery - найкращий вибір, оскільки існує проблема сумісності зі стовпцем CSS3.

— книжкова білизна
джерело

3

Додана CSS3-шлях тут , щоб залишитися!

— behradkhodayar

27

Можна використовувати флексбокс.

Помістіть свої елементи у багаторядковий гнучкий контейнер
```
#flex-container {
  display: flex;
  flex-flow: column wrap;
}
```

Перестановіть елементи, щоб порядок DOM дотримувався горизонтально, а не вертикально. Наприклад, якщо ви хочете 3 стовпчики,

#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 */
}
```
На жаль, ще не всі браузери підтримують розриви ліній у flexbox. Хоча це працює і на Firefox.

Показати фрагмент коду

#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, я думаю, ви тут пропустите суть. Інше рішення для вирішення цієї проблеми - це використання стовпців CSS3. але, дякую за відповідь

— Аріона Ріан

1

@ArionaRian Спробуйте фрагмент на Firefox, інші браузери ще не підтримують вимушені розриви рядків. І так, CSS-колонки можуть також працювати, але на відміну від flexbox, який здається більш призначеним для тексту, ніж для верстки.

— Оріол

Так, це проблема :), Ось чому до цих пір ми все ще дотримуємося плагін для кладки / ізотопів для викладки подібного дизайну.

— Аріона Ріан

Просто поставте дисплей: flex; flex-wrap: обгортання; (і нічого більше) на контейнері, і він ідеально працює в Chrome, Firefox, Safari, IE11 на Win11 та Win7. Однак будьте обережні з мінімальною висотою (див. Caniuse.com/#search=flex-wrap )

— LBJ

@LBJ Але тоді елементи розташовуються в рядки. Це не бажана поведінка тут

— Oriol

11

Тепер, коли CSS3 широко доступний та сумісний через основні браузери, його час для чистого рішення, оснащеного фрагментом інструмента SO:

Для створення макета кладки з використанням CSS3 column-countпоряд із цим column-gapбуде достатньо. Але я також звик media-queriesзробити це чуйним.

Перш ніж зануритися в реалізацію, врахуйте, що було б набагато безпечніше додати резервну копію бібліотеки jQuery Masonry, щоб зробити ваш код сумісним для застарілого браузера, особливо IE8-:

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

Ось і ми:

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

Розгорніть фрагмент

— беградходаяр
джерело

Чи знаєте ви, як мати рівний простір між предметами в кладці та контейнером?

— intcreator

5

Це добре, але для багатьох людей є ЗАМОВЛЕННЯ masonry bricks. У стовпці упорядковуються речі зверху вниз, питання просить, щоб наказ залишався таким же горизонтальним, а не переходив на вертикальний. Наприклад, найкоротший блок, знайдений вище, ДОЛЖЕН бути у третьому стовпчику, але верхньому рядку.

— jscul

4

Найкращим варіантом вирішення цього завдання є лише використання css властивості count-count.

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

Перевірте це для отримання додаткової інформації: https://developer.mozilla.org/en/docs/Web/CSS/column-count

— Патрісіо Габріель Маседа
джерело

3

Можна використовувати display: grid

наприклад:

Це сітка з 7 стовпцями, а рядки мають автоматичний розмір.

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

Для отримання більш детальної інформації звертайтесь за посиланням: https://css-tricks.com/snippets/css/complete-guide-grid/

— vrbsm
джерело

2

За допомогою модуля CSS Grid ви можете створити досить схожий макет.

Демонстрація CodePen

1) Встановіть три колонки з фіксованою шириною

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

2) Переконайтеся, що предмети з великим прольотом висоти 2 ряди

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>

Розгорніть фрагмент

Codepen demo

Проблеми:

Зазори між елементами не будуть однаковими
Ви повинні встановити великі / високі елементи вручну на 2 або більше рядків
Обмежена підтримка браузера :)

— Даніелд
джерело

1

і якщо ви хочете піти ще далі, ніж кладка, використовуйте ізотоп http://isotope.metafizzy.co/ це вдосконалена версія кладки (розроблена тим самим автором), це не чистий CSS, він використовує допомогу Javascript але це дуже популярно, тому ви знайдете безліч документів

якщо ви вважаєте це дуже складним, є багато плагінів преміум-класів, які вже засновували свій розвиток на ізотопі, наприклад, Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

— користувач1978456
джерело

1

Є один приклад на основі сітки .

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

Розгорніть фрагмент

на основі цієї кодової ручки від Рейчел Ендрю FTW

— Володимир Іщенко
джерело