How to create a gallery with an ad block with flex box - html

Question

I would like to create a gallery which has a block for ads at the right side. The gallery images should float around the ad block. If possible, I would also like that the ad block doesn't "get buried" on smaller screens (or when it's collapsed in the desktop browser), but is shown as high up as possible.
But whatever I try, I can't flex my head around this problem. Wrapper boxes, justifying them in any possible way, using order etc didn't work.
.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>
Result:
Any solution except CSS grid (because it's less supported) is much appreciated.

Answer 1

Sounds like a good use case for 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>