как используя grid разместить по 4 блока по горизонтали и сделать адаптив?

Задача, есть 12 блоков, разместить их по горизонтали по 4. Когда браузер сжимается, чтобы перегруппировывались по 3, потом по 2, потом по 1.

Мои попытки:

.grid {
     display: grid;
     grid-gap: 10px;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

<div class="grid">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
 и т.д