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)?
.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;
}<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>
