I have a CSS grid with a bunch of auto-flowed grid items. Sometimes the grid items are one 1 x 1 track, and sometimes they're 2 x 2 tracks, so I *do not know from the source order which items will be in certain positions in the grid*. This means that styling with `:nth-child()` will not be reliable. 

I would like to add styling to items in certain grid columns, (mostly the last column). Is there a CSS selector that will let me style these items?

For example, in this demo, how would I style boxes 3, 5, and 9, ([codepen here](https://codepen.io/johnbeales/pen/ybZrQa))?

```css
.grid-container {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 1em;
        grid-row-gap: 1em;
    }

    .grid-item {
        background-color: #aea;
        text-align:center;
        font-size:3em;
        min-height:3em;
        line-height: 3em;
    }

    .grid-item.double {
        grid-column-start: span 2;
        grid-row-start: span 2;
    }
```

```html
<body>
<div class="grid-container">

    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item double">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
</div>
</body>
```

**Edit:** The code will end up in a CMS and may change in the future.