Как расположить div-ы подобным образом?

Question

Как расположить элементы как на картинке(не добавляя оберток и не меняя html). Можно использовать CSS и JS.

<div class='root'>
   <div class='el'>...</div>
   <div class='el'>...</div>
   <div class='el'>...</div>
   <div class='el'>...</div>
   <div class='el'>...</div>
   <div class='el'>...</div>
</div>

Answer 1

Данное расположение называется сетка masonry. Если в поиске поискать будет куча материала.

Ниже пример для понимания:

body {
  font: 1em/1.67 'Open Sans', Arial, Sans-serif;
  margin: 0;
  background: #e9e9e9;
}

.wrapper {
  width: 95%;
  margin: 3em auto;
}

.root {
  margin: 1.5em 0;
  padding: 0;
  -moz-column-gap: 1.5em;
  -webkit-column-gap: 1.5em;
  column-gap: 1.5em;
  font-size: .85em;
}

.el {
  display: inline-block;
  background: #fff;
  border-radius: 10px;
  padding: 1em;
  margin: 0 0 1.5em;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 2px 2px 4px 0 #ccc;
}

@media only screen and (min-width: 400px) {
  .root {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media only screen and (min-width: 700px) {
  .root {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media only screen and (min-width: 900px) {
  .root {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media only screen and (min-width: 1100px) {
  .root {
    -moz-column-count: 5;
    -webkit-column-count: 5;
    column-count: 5;
  }
}

@media only screen and (min-width: 1280px) {
  .wrapper {
    width: 1260px;
  }
}

<div class="wrapper">
  <div class="root">
    <div class="el">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="el">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor
      sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="el">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="el">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="el">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="el">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="el">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="el">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="el">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
</div>

БЛОГ НА HUSL

Как расположить div-ы подобным образом?

Ответы (1 шт):