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

Для реализации автоматического изменения размера или расположения элементов grid-блока при изменении размеров экрана, вы можете использовать CSS Media Queries вместе с CSS Grid Layout. Это позволит адаптировать макет страницы к различным размерам экрана устройств. 

Вот пример кода, как вы можете это сделать:

```css
/* Базовый стиль для grid-контейнера */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Два столбца с равным делением доступного пространства */
  grid-gap: 10px; /* Отступы между элементами */
}

/* Стиль для маленьких экранов */
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr; /* Один столбец для маленьких экранов */
  }
}

/* Стиль для средних экранов */
@media (min-width: 601px) and (max-width: 900px) {
  .container {
    grid-template-columns: 1fr 1fr; /* Два столбца для средних экранов */
  }
}

/* Стиль для больших экранов */
@media (min-width: 901px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr; /* Три столбца для больших экранов */
  }
}
```

В этом примере для маленьких экранов (ширина до 600px) grid-контейнер будет иметь один столбец, для средних экранов (от 601px до 900px) два столбца, и для больших экранов (от 901px) три столбца.

HTML мог бы выглядеть так:

```html
<div class="container">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
  <!-- ... другие элементы ... -->
</div>
```

Используя такие медиа запросы вы можете адаптировать ваш grid-макет к разным размерам экрана и сделать дизайн вашего сайта отзывчивым (responsive).

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