Как получить с помощью js строку grid?

Question

[Иван Доброславин]

<div class="grid">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>       
</div>

.grid {display: grid; grid-template-columns: 20px 200px auto}

Можно ли с помощью javascript "поймать" строку grid'а и если да, то как?
Т.е. первые item-1, item-2 и item-3 - будут в 1-й переменной, следующие item-1, item-2 и item-3 будут уже в другой переменной.

P.S. Я вижу только 1 вариант:

elem1 = document.querySelector('.item-1:nth:child(1), .item-2:nth:child(1), .item-3:nth:child(1)');
 elem2 = document.querySelector('.item-2:nth:child(2), .item-2:nth:child(2), .item-3:nth:child(2)');
и т.д.

Есть альтернативы?

Comments

[Vearodev]

вопрос непонятен, вам нужно получить все дочерние блоки внутри grid?

[Kovalsky]

Покажите пример на jsfiddle/codepen

Answer 1

[Vearodev]

document.querySelectorAll('.grid > div');

Comments

[Иван Доброславин]

это будет для всех вложенных дивов.

[Vearodev]

Иван Доброславин, только для тех которые лежат непосредственно в grid. То что находится в div.item не попадёт в выборку

[Vearodev]

Иван Доброславин, https://jsfiddle.net/vearo/e7n25csa/