Как создать вид сетки / плитки?

129

Например, у меня есть класс .article, и я хочу видеть этот класс в виде сетки. Итак, я применил этот стиль:

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

В этом стиле .article будет выглядеть мозаично / сеткой. Он отлично работает с фиксированной высотой. Но если я хочу установить высоту автоматически (автоматически растягиваться в соответствии с данными в ней), сетка выглядит неприятно.

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

И я хочу сделать такой вид:

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

— Ариона Риан
источник

79

Такой вид планировки называется кладкой . Каменная кладка - это еще одна сетка, но она заполняет пробелы, вызванные разницей в высоте элементов.

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

В качестве альтернативы вы можете использовать CSS3 columns. Но пока плагин на основе jQuery - лучший выбор, поскольку существует проблема совместимости со столбцом CSS3.

— bookcasey
источник

3

Добавлена CSS3-путь здесь , чтобы остаться!

— behradkhodayar 05

27

Вы можете использовать flexbox.

Поместите элементы в гибкий контейнер с многострочным столбцом
```
#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, который кажется больше предназначен для текста, чем для макета.

— Oriol

Да, вот в чем проблема :) Вот почему до сих пор мы все еще придерживаемся плагина masonry / isotope для разметки такого дизайна.

— Ariona Rian

Просто поставьте display: flex; flex-wrap: обертка; (и не более того) в контейнере, и он отлично работает в Chrome, Firefox, Safari, IE11 на Win11 и Win7. Однако будьте осторожны с min-height (см. 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>

Развернуть фрагмент

— behradkhodayar
источник

Знаете ли вы, как обеспечить равное пространство между элементами в кладке и емкости?

— intcreator

5

Это хорошо, но для многих людей необходимо ЗАКАЗАТЬ masonry bricks. Столбец упорядочивает вещи сверху вниз, вопрос заключался в том, чтобы порядок оставался неизменным по горизонтали, а не переключался на вертикальный. Например, самый короткий блок, найденный выше, ДОЛЖЕН находиться в третьем столбце, но в верхней строке.

— jscul

4

Лучший вариант решить эту проблему с помощью только css - использовать свойство css column-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

Проблемы:

Промежутки между предметами не будут одинаковыми
Вы должны вручную установить большие / высокие элементы, чтобы они занимали 2 или более строк.
Ограниченная поддержка браузера :)

— Danield
источник

1

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

если вы находите это очень сложным, то есть много плагинов премиум-класса, которые уже основывают свою разработку на изотопах, например Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

— user1978456
источник

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

— Владимир Ищенко
источник