I'm making a React app that renders xy number of cards and a single widget inside a Flex container. All cards have the same width and height, but the widget's height is equal to card height * 2 row-gap. The width of the container changes based on the viewport width and should visually look like 2 or 3 columns with cards respectively. For further clarity, I've provided a mockup image of the required layout, with the widgets represented in blue.

No matter what I try, I can't get the widgets to display in the correct position without changing the height of the row to its size, leaving a "blank row" where 1 or 2 more cards should be rendered , as shown in the figure below.

My current solution involves Javascript, and depending on the viewport width, I load 2 or 4 cards into a separate small Flex container, which is rendered as the first child of the main Flex container. This workaround works great visually, but makes my code more complex since I have to cover a lot of different situations to get it to work properly. I'd like to achieve the same goal using css/flexbox, but I'm still a beginner and have never done a layout like this before and obviously have no idea how to do it. The widget cannot be absolutely positioned because this would break the scrolling functionality of its child elements.

I'm providing test HTML and CSS measurements in correct proportions in case it helps.

.container {
  margin: 50px 300px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  column-gap: 20px;
  min-width: 320px; /* Width for 2 columns */
  max-width: 490px; /* Width for 3 columns */
  border: 3px solid rgb(0, 22, 117);
}

.card {
  width: 150px;
  height: 100px;
  background-color: bisque;
}

.widget {
  height: 220px; /* card height * 2 row-gap */
  width: 150px;
  background-color: rgb(134, 204, 245);
}

<div class="container">
  <div class="widget"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

<!-- Original jsx
<div className='container'>
  <div className='widget'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
</div>
-->

I would really like to learn how to create a layout like this in Flexbox, not only for my current project, but also to expand my knowledge and understanding. If you have any ideas on how to solve this problem, please help me. Thank you in advance :)