xdevelx

Самая обычная таблица.

clip-path прекрасно умеет скруглять, rtfm.

Вот через фильтр, когда-то похожее делал:

Принцип прост: размываешь подложку через feGaussianBlur, делаешь края снова резкими через ComponentTransfer альфа-канала. В твоём случае ещё stroke и drop-shadow наверное понадобятся, сам смотри.

...upd: из интереса нафигачил без фильтров:

Всё возможно.:)

Поигрался пут с фильтром, вот версия фильтр + простой clip-path, поддерживает полупрозрачность фона, полупрозрачность бордера и тень:

clip-path'ом вырезаем простые квадраты, фильтром закругляем. Фильтр можно в принципе применять к любому набору элементов. Версия не последняя, есть шероховатости, может ещё когда-нить потыкаю ещё.:)

Есть.

Практически все способы вставки svg в html не позволяют менять цвет при помощи css.

При вставке в разметку вообще нет проблем менять цвет.

fill: red;
stroke: green;

и т.д.
Альтернативный вариант, а разметке задаем в заливку или обводку currentColor, в CSS меняем свойство color.

Ещё один - использование кастомных свойств.

При вставке прямо в CSS
Маски и фильтры.

mask: url(img.svg) no-repeat center / contain;
  background: red;
  
  &:hover {
    background: green;
  }

Один из вариантов - инлайнить SVG прямо в CSS (в кастомные свойства, чтобы не мусорить в селекторах).
Другой вариант - собираем стек из SVG и используем в url в маске.

Собственно, стеки можно использовать где угодно, в отличие от устаревшего спрайта.
https://telegra.ph/Stack--sprajt-zdorovogo-chelove...

Поиграть со селекторами nth-child и nth-last-child.

Для начала попробуем выбрать первый элемент последнего неполного ряда. Селектор :nth-child(3n + 1) выберет нам первые элементы каждого ряда.

Теперь надо ограничить этот список только последним рядом. Видно что нужный нам элемент всегда первый или второй с конца. Так и запишем :nth-last-child(-n + 2).

В итоге получили селектор :nth-child(3n + 1):nth-last-child(-n + 2).
Ну а дальше воспользуемся селектором ~ что бы выбрать все (в вашем случае не больше одного) элементы которые идут после уже выбранного.

Получается вот такой код:

li:nth-child(3n + 1):nth-last-child(-n + 2),
li:nth-child(3n + 1):nth-last-child(-n + 2) ~ li {
  .....
}

UPD: если надо что бы последний ряд выбирался всегда, даже если он полный, то надо заменить -n + 2 на -n + 3.

UPD2: можно пойти немного другим путём и выбирать все элементы после последнего элемента в полном ряду. Получится вот так:

li:nth-child(3n):nth-last-child(-n + 3) ~ li {
  .....
}

Работает

Что же вас заставляет в современном мире верстать инлайн-блоками?

1. Если элементов только на одну строку, то
.elem:not(:last-child) {margin-right: NNpx}
либо .elem + .elem {margin-left...}
2. Если строк больше, но элементов известное количество, переписываем предыдущую формулу через nth-child
3. Если строк больше и количество элементов в строке неизвестно, придется использовать идиотский способ с отрицательным margin для контейнера на величину лишних отступов.

Но ведь есть же простой, удобный, логичный gap в гридах и флексах!

Весь фокус в этом:

border: 1px solid transparent;
background: linear-gradient(#e5e2e2, #e5e2e2 0) padding-box,
linear-gradient(90deg, #fa5560, #4d91ff) border-box;

.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;
}

Отличная статья про техники разбиения слов. Там можно чуть лучше разобраться со всеми техниками

А в чем сложность?

Надо просто фон вынести в отдельный элемент тоже:

Хорошо, конечно, что вы уверены, что высота точно 60. Что вас не волнует никакое переполнение шапки ни по какой из причин (увеличенный шрифт у пользователя, отвалился дизайнерский шрифт, использование переводчиков и другие банальные причины)
Если так, то да, calc и вперед.

Разумнее, задать родителю высоту 100vh и грид. В котором первой строке задан min-content, а для main 1fr, т.е. все оставшееся пространство.
grid-template-rows: min-content 1fr
Аналогично можно сделать и флексом и flex-grow для main.

Так получится универсальное решение, не зависящее от высоты шапки.

Можно гриды попробовать https://youtu.be/B_n4YONte5A?si=9r_06AFYgXvLqdMH&t=122

Вместо выдёргивания координат из стилей лучше будет сделать массив с координатами, обновлять этот массив, и уже на его основе задавать translate элементу. А чтобы не делать отдельные обработчики клика всем кнопкам, можно записать им в data-атрибут информацию о том, на сколько какие координаты должна изменить данная кнопка.

<button data-steps="1,0">right</button>
<button data-steps="-1,0">left</button>
<button data-steps="0,1">down</button>
<button data-steps="0,-1">up</button>
<button data-steps="1,1">right down</button>
<button data-steps="0,-2">double up</button>

const coord = [ 0, 0 ];
const stepSize = 30;

const box = document.querySelector('#box');
const buttons = document.querySelectorAll('[data-steps]');

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  this.dataset.steps.split(',').forEach((n, i) => coord[i] += n * stepSize);
  box.style.transform = `translate(${coord.map(n => `${n}px`).join(',')})`;
}