Гриды, автоперенос

.grid__container {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
  --size: 15px;
  grid-gap: var(--size);
  color: white;
  font-family: sans-serif;
}

.grid__item {
  background-color: red;
  color: white;
  padding: var(--size);
}

@media (max-width: 500px) {
  .grid__container {
    grid-template-columns: 1fr;
  }
}

<div class="grid__container">
  <div class="grid__item">Text</div>
  <div class="grid__item">Text</div>
  <div class="grid__item">Text</div>
  <div class="grid__item">Text</div>
</div>