Сделать обтекание div'a другим div'ом

Question

Есть 3 одинаковые по ширине колонки. В каждой колонки есть ещё блоки высотой 150 пикселей. В какой-то момент времени один из блоков может вырасти в ширине так что будет вылазить за ширину своей колонки. Есть ли возможность сделать обтекание показанное на рисунке?

Answer 1

Сложно, но получилось решить это при помощи Flexbox.

.list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  background: linear-gradient(to right,
    transparent calc(33.3% - 1px), red,
    transparent calc(33.3% + 1px),
    transparent calc(66.6% - 1px), red,
    transparent calc(66.6% + 1px)
  );
}

.list .item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(33.3% - 20px);
  padding: 10px 0;
  border: 1px solid #000;
  margin: 10px;
  box-sizing: border-box;
}

.list .item:nth-child(2) {
  width: 100%;
  order: 0;
}

.list .item:nth-child(1),
.list .item:nth-child(3),
.list .item:nth-child(6){order: -1;}

.list .item:nth-child(4),
.list .item:nth-child(5) {
  page-break-after: always; /*  */
}

<div class="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Можно сказать что не работает..

Вот так это выглядит в Firefox:

А вот так в Chrome:

Answer 2

Готовый код c помощью display: grid. Работает корректно во всех браузерах

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 150px);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

div {
  text-align: center;
  font-size: 6rem;
}

.div1 {
  background: FireBrick;
  grid-area: 1 / 1 / 2 / 2;
}

.div2 {
  background: MediumVioletRed;
  grid-area: 2 / 1 / 3 / 4;
}

.div3 {
  background: DarkOrange;
  grid-area: 1 / 2 / 2 / 3;
}

.div4 {
  background: DarkCyan;
  grid-area: 3 / 2 / 4 / 3;
}

.div5 {
  background: Purple;
  grid-area: 4 / 2 / 5 / 3;
}

.div6 {
  background: DarkGreen;
  grid-area: 1 / 3 / 2 / 4;
}

<div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
  <div class="div5">5</div>
  <div class="div6">6</div>
</div>

//codepen.io/savinovsky-r/pen/yLORwQa

БЛОГ НА HUSL

Сделать обтекание div'a другим div'ом

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