Сергей delphinpro

Подбирайте среднее значение (22vw)
Его можно высчитать. Например, блок должен начать уменьшаться на ширине экрана в 1000px. Единица изменения vw есть не что иное как процент от ширины экрана.
Значит нужно посчитать процент 435 от 1000. Это будет 43.5%.
Итого

.s {
  grid-template-columns: 355px clamp(290px, 43.5vw, 435px);
}

- grid-template-rows: auto auto
+ grid-template-rows: auto 1fr

нарисовать градиентом на фоне грид-контейнера

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: calc(300px * 3 + 30px * 2);
  margin: auto;
}

Используя функцию repeat() и пользовательские свойства, можно задавать кол-во колонок в разметке, без хардкодинга в css. Не совсем то, что вам нужно, но кол-во ячеек, как правило известно при выводе информации, и серверный код вполне может проставить нужно значение.

У гридов нет свойств для изменения направления. Есть у флексов, но только по одной оси.
Поэтому проще будет вывести разметку в обратном порядке.
Примерно так:

.news_block_main{
    display: grid;
+   grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
-    grid-template-columns: repeat(4, 1fr);
-    grid-template-areas: 
-    "img1 img2 img3 img4";
    gap: 24px;
    margin-bottom: 160px;
}

a b b a
a b b a
a b b a
a b b a
c c d d

2fr 1fr 1fr 2fr

Если количество блоков не определено заранее, то как во флексах сделать не выйдет.

Если количество блоков фиксировано, то сделать можно. Нужно увеличить количество колонок до общего кратного всех вариантов количеств ячеек в строках. В данном случае вам нужно НОК от двух чисел - 4 и 3. Это 12 вроде бы.

Теперь задаете сетку в 12 колонок и раскидываете по ним блоки.

Элементарно.
Несколько спозиционированных гридами картинок/блоков.
Сложные формы реализуются через clip-path или svg маски
При уменьшении экрана сложная форма преобразуется в прямоугольную, блоки встают в столбик.

но не пойму, как 4 блок перенести в 3 колонку сначала?
Использовал данные стили, но 4 блок был на месте 5, и последующие не заполняли свободные ячейки

.box:nth-child(3n) {
 grid-column: span 2
}

У вас повтор идет через пять блоков. Значит должно стоять 5n – каждый пятый
Но применяться должно к 4-му блоку в этой пятерке. Значит нужно добавить смещение + 4
Итог:

.box:nth-child(5n + 4) {
    grid-column: span 2;
}

<div class="grid">
    <img class="grid-item" src="">
    <img class="grid-item" src="">
    <img class="grid-item" src="">
    <img class="grid-item" src="">
    <img class="grid-item" src="">
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 2px;
}
.grid-item:nth-child(1),
.grid-item:nth-child(2) { grid-column: span 3; }
.grid-item:nth-child(3),
.grid-item:nth-child(4),
.grid-item:nth-child(5) { grid-column: span 2; }

Да это же самое простое. Я по заголовку вопроса думал тут реально интересная раскладка =((

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.item:nth-child(3n + 3) {
  grid-column: span 2;
}

Сделать сетку 3*4
Разместить нужные пункты в нужных ячейках.
Контакты можно разместить в одной ячейке и сместить на половину line-height вверх и вниз.

Количество элементов списка может быть разное

Тогда просто два столбика с авторазмещением, а логотип и контакты повесить абсолютом.

https://yandex.ru/search/?text=masonry+layout&lr=2...