I have a grid layout - 4 columns per row. I am using CSS grid layout.

Say there could potentially be an infinite number of items.

```
<div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <!-- ... -->
</div>

```

How could I select the two middle items of each row if the number of items is potentially infinite. For example for the first three rows I would need to select:

`nth-child(2)`, `nth-child(3)`, `nth-child(6)`, `nth-child(7)`, `nth-child(10)`, `nth-child(11)`

I could hard code the styles up to a specific number assuming there wouldn't be an infinite number, but if there's a way to do it dynamically I'd rather do that.

[![enter image description here](https://i.stack.imgur.com/WazYw.jpg)](https://i.stack.imgur.com/WazYw.jpg)