Как создать галерею с рекламным блоком с flex box

Question

Я хотел бы создать галерею с блоком для рекламы справа. Изображения галереи должны плавать вокруг рекламного блока. Если это возможно, мне также хотелось бы, чтобы рекламный блок не «закапывался» на небольших экранах (или когда он свернут в браузере рабочего стола), а показывался как можно выше.

Но что бы я ни пытался, я не могу согнуть голову вокруг этой проблемы. Ящики с оберткой, оправдывая их любым возможным способом, используя порядок и т. Д., Не работали.

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wrapper article {
    border: 1px #ccc solid;
    padding: 10px;
}

article {
    flex: 5;
}

.inner-wrapper {
    display: flex;
    flex-wrap: wrap;
    border: 1px #ccc solid;
    justify-content: center;
    flex-direction: row;
}

.video-box {
    display: flex;
    border: 1px #ccc solid;
    height: 130px;
    width: 190px;
    font-size: 60px;
    font-weight: bold;
    color: white;
    background-color: cornflowerblue;
    align-items: center;
    justify-content: center;
}

.add-box {
    display: flex;
    height: 260px;
    width: 380px;
    font-size: 60px;
    font-weight: bold;
    color: white;
    background-color: orangered;
    align-items: center;
    justify-content: center;
}

<div class="wrapper">
    <article>
        <h2>Videos</h2>
        <div class="inner-wrapper">
                <div class="add-box">Ads</div>
                <div class="video-box">1</div>
                <div class="video-box">2</div>
                <div class="video-box">3</div>
                <div class="video-box">4</div>
                <div class="video-box">5</div>
                <div class="video-box">6</div>
                <div class="video-box">7</div>
                <div class="video-box">8</div>
                <div class="video-box">9</div>
                <div class="video-box">10</div>
                <div class="video-box">11</div>
                <div class="video-box">12</div>
                <div class="video-box">13</div>
                <div class="video-box">14</div>
                <div class="video-box">15</div>
                <div class="video-box">16</div>
                <div class="video-box">17</div>
                <div class="video-box">18</div>
                <div class="video-box">19</div>
                <div class="video-box">20</div>
                <div class="video-box">21</div>
        </div>
    </article>
</div>

Результат:

Любое решение, кроме CSS-сетки (потому что оно менее поддерживается), высоко ценится.

Answer 1

Звучит как хороший вариант использования для desandro/masonry.

var elem = document.querySelector('.grid');
var msnry = new Masonry(elem, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wrapper article {
  border: 1px #ccc solid;
  padding: 10px;
}

article {
  flex: 5;
}

.inner-wrapper {
  display: flex;
  flex-wrap: wrap;
  border: 1px #ccc solid;
  justify-content: center;
  flex-direction: row;
}

.video-box {
  display: flex;
  border: 1px #ccc solid;
  height: 130px;
  width: 190px;
  font-size: 60px;
  font-weight: bold;
  color: white;
  background-color: cornflowerblue;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.add-box {
  display: flex;
  height: 260px;
  width: 380px;
  font-size: 60px;
  font-weight: bold;
  color: white;
  background-color: orangered;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="wrapper">
  <article>
    <h2>Videos</h2>
    <div class="inner-wrapper grid">
      <div class="grid-item add-box">Ads</div>
      <div class="grid-sizer grid-item video-box">1</div>
      <div class="grid-item video-box">2</div>
      <div class="grid-item video-box">3</div>
      <div class="grid-item video-box">4</div>
      <div class="grid-item video-box">5</div>
      <div class="grid-item video-box">6</div>
      <div class="grid-item video-box">7</div>
      <div class="grid-item video-box">8</div>
      <div class="grid-item video-box">9</div>
      <div class="grid-item video-box">10</div>
      <div class="grid-item video-box">11</div>
      <div class="grid-item video-box">12</div>
      <div class="grid-item video-box">13</div>
      <div class="grid-item video-box">14</div>
      <div class="grid-item video-box">15</div>
      <div class="grid-item video-box">16</div>
      <div class="grid-item video-box">17</div>
      <div class="grid-item video-box">18</div>
      <div class="grid-item video-box">19</div>
      <div class="grid-item video-box">20</div>
      <div class="grid-item video-box">21</div>
    </div>
  </article>
</div>