[Malleys]

Почему элементы после 4-го, наслаиваются на верхние элементы, как этого избежать ?

У вас в 15 строчке написано grid-auto-rows: 20px;, это значит ряды сетки формируются в зависимости от кол-ва элементов и высота ряда сетки 20px. У ваших элементов высота больше, чем 20px, и они соответственно не вмещаются в ячейку. Удалите это объявление, и высота ряда сетки будет автоматически вычисляться по самому высокому элементу в ряду.

Стоит учитывать, что расположение элементов зависит от сетки, а не сетка зависит от расположения элементов.

А так ваша задача может быть решена при помощи такого кода.

.blog_list {
	column-count: 4;
	column-gap: 25px;
}

.blog_list__item {
	break-inside: avoid;
	overflow: auto;
	margin-bottom: 25px;
}

замените с 11 по 24 строчки на эти.

grid-template-columns: repeat(4, minmax(200px, 1fr));
что означает 1fr, это жадность, а не 25%,
width:100%;
grid-template-columns: repeat(4, minmax(200px, 25%));

Единица измерения fr представляет суммарную часть оставшегося пространства в сеточном контейнере.

например, repeat(4, minmax(200px, 1fr)), здесь 1fr повторяется 4 раза, соответственно 4fr это максимальный размер контейнера. И если он на самом деле равен 100%, то в данном случае 1fr равен 25%.

например, 1fr 2fr 3fr, здесь сумма равна 6fr, соответственно 1fr равен одной шестой размера контейнера.

например, 1fr 10px 2fr, здесь сумма равна 3fr + 10px, соответственно 1fr равен (размер контейнера - 10px) / 3

https://www.w3.org/TR/css-grid-1/#fr-unit