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

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

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

Этот стиль сделает свое .статья выглядит выложенной плиткой / сеткой. Это прекрасно работает с фиксированной высотой. Но если я хочу установить высоту в auto (автоматически растягивать в соответствии с данными внутри него), сетка выглядит неприятно.

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

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

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

8 105
css css-float tiles positioning

8 ответов:

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

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

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

74

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

  1. Поместите элементы в многострочный гибкий контейнер столбца 

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

  2. Измените порядок элементов таким образом, чтобы порядок 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 */

  3. Принудительный разрыв столбца перед первым пунктом каждого столбца: 

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

Теперь, когда CSS3 широко доступен и совместим с основными браузерами, пришло время для чистого решения, оснащенного инструментом so snippet:

Для создания кладки макета с использованием CSS3 достаточно column-count вместе с column-gap. Но я также использовал media-queries, чтобы сделать его отзывчивым.

Перед погружением в реализацию, пожалуйста, подумайте, что было бы намного безопаснее добавить резервную библиотеку jQuery Masonry, чтобы сделать ваш код совместимым для legacy браузер, специально 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>
8

Лучший способ решить эту проблему с помощью только css-это использовать свойство css column-count.

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

Проверьте это для получения дополнительной информации: https://developer.mozilla.org/en/docs/Web/CSS/column-count

4

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

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

1

Вы можете использовать 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/

1

С помощью модуля CSS Grid Вы можете создать довольно похожий макет.

CodePen demo

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

Есть один пример на основе сетки.

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

На основе этого кода-pen by Rachel Andrew F. T. W

0