Список карточек с рекламой, размещенных справа, с использованием гибкости или сетки

Question

Я хочу реализовать эту структуру html. Я пробовал использовать flex, но не работает, так как последний столбец объявлений не одинаковой высоты и может занимать до 2–4 строк. и я хочу сделать его отзывчивым, поэтому при изменении размера карточек будет go в следующей строке, если они не найдут достаточно места.

.ads {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    grid-column: 6 / span 2;
    grid-row: 1 / span 3;
    margin: 0;
    float: none;
}
.container {
    display: grid;
    grid-gap: 22px;
    justify-content: space-between;
}
.card {
    margin:0;
}

Answer 1

Хорошая новость - мы можем добавлять рекламу в родительский контейнер высотой 3 строки. Вот вам go

.main-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* determines 7 columns with same width */
  grid-auto-rows: minmax(100px, auto); /* determines the height of the row */
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.main-grid>div {
  background: #eee;
}

.main-grid>div.ads-grid {
  background: none;
  grid-area: 1 / 6 / 4 / 8; /* row-start / column-start / row-end / column end */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.main-grid>div.ads-grid>div {
  background: #000;
}

/* example for screens less than 460 */
@media (max-width: 460px) {
  .main-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .main-grid>div.ads-grid {
    grid-area: 1 / 3 / 4 / 5;
  }  
}

<div class="main-grid">
  <div class="ads-grid">
    <div></div>
    <div></div>
  </div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Не забудьте исправить .main-grid {grid-template-columns: repeat(7, 1fr)} и .main-grid>div.ads-grid {grid-area: 1 / 6 / 4 / 8;} с изменением ширины @media для маленьких экранов. Подробнее про grid-area здесь https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

И ни одного flex в тот день не было выдано.