ProjectSoft

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

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

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

<ul>
<div id="foo">
  <li>You have cat to be kitten me right meow</li>
  <li>Eat plants, meow, and throw up</li>
  <li>my owner today cough furball into food bowl</li>
  <li>I shredded your linens for you</li>
 </div>
  <li>Play time carefully drink from water glass</li>
  <li>jump on human and sleep on her all night long</li>
  <li>purr in the morning and then give a bite to every human around</li>
  <li>waking up request food, purr loud scratch the walls</li>
</ul>

Время получения 40000+ записей из таблицы offers = 0.2s

Вот такой код отрабатывается за 4s

- let input = document.getElementsByClassName('form-control');
+ const input = document.querySelector('input.form-control');

const openPopUp = document.getElementById('open_pop_up');

const closePopUp = document.getElementById('pop_up_close');

<a class="table_box_button" href="#" class="open_pop_up">Заказать</a>

let dataList = {};

fetch('https://api.hh.ru/areas/113').then(response => {
    return response.json();
}).then(
    json => {
      const cities = json.areas.reduce((array, area) => {
        const citiesAtArea = area.areas.reduce((citiesArray, city) => {
          return [...citiesArray, city.name]
        }, [])
        return [...array, ...citiesAtArea]
      }, [])
      
      console.log(cities)
    }
);