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

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

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

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

И я хочу сделать вид следующим образом:

Ответ 1

Этот тип макета называется масонским макетом. Масонство - это еще один макет сетки, но он заполнит пробелы, вызванные разностью высот элементов.

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

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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

Демо-версия 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>

Ответ 7

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

Ответ 8

Существует один пример на основе сетки.

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

Ответ 9

Люди, которые используют платформу bootstrap, и если они не хотели бы использовать что-либо еще, они могут просто сделать следующее.

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <!-- Now using divs keep adding data content in specific format, just don't add height explicitly-->
              <div> </div>
        </div>
        <div class="col-md-6">
            <!-- Now using divs keep adding data content in specific format, just don't add height explicitly-->
              <div></div>  
        </div>
    </div>
</div>