Javascript / CSS кладка - уважать колонны

Question

Я хочу использовать стиль масонства (CSS или Javascript) для определения конкретной c сетки.

Я сделал пример того, что я ожидаю: https://jsfiddle.net/7s2e41tL/

У меня есть сетка на основе столбцов, и я использую stati c положение, поля и ширину, это хорошо, но каждый div располагается после предыдущего:

+---+---+---+---+---+
| 1 |   |   |   |   |
+---+---+---+---+---+
|   | 2 |   |   |   |
+---+---+---+---+---+
|   | 3 | 3 |   |   |
+---+---+---+---+---+
|   |   |   | 4 | 4 |
+---+---+---+---+---+

И это то, что я хочу:

+---+---+---+---+---+
| 1 | 2 |   | 4 | 4 |
+---+---+---+---+---+
|   | 3 | 3 |   |   |
+---+---+---+---+---+

Я пробовал сценарий Masonry, и, согласно do c, этот пример кажется хорошим:

$grid.isotope({ 
    layoutMode: 'cellsByColumn' 
})

Но он не уважает столбцы . Есть ли способ "разложить" мой макет в соответствии с столбцами?

Я пробовал flex CSS, разные плагины, и я пытаюсь построить что-то простое с помощью матричной системы, но не могу найти путь ..

Answer 1

Вы можете использовать свойство CSS display: grid.

Я взял ваш пример здесь:

body {
  background: white;
  color: white;
  font-size: 2em;
  font-weight: 300;
}

.grid-container {
  background: lightgrey;
  box-sizing: border-box;
  width: 500px; /* You need this only if you want your columns to have a specific width. Here 5*100px = 500px */
  height: 200px; /* Same for the height */
  grid-gap: 5px;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.grid-container div{
  background: red;
}

.el-1{
  grid-column: 1/2;
  grid-row: 1/2;
}

.el-2{
  grid-column: 2/3;
  grid-row: 1/2;
}

.el-3{
  grid-column: 2/4;
  grid-row: 2/3;
}

.el-4{
  grid-column: 4/6;
  grid-row: 1/2;
}

<div class="grid-container">
  <div class="el-1">1</div>
  <div class="el-2">2</div>
  <div class="el-3">3</div>
  <div class="el-4">4</div>
</div>