Are there selectors that target elements in certain grid positions?

user_4479812 0
Viewed 1251

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>

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

css-grid css-selectors css html
2 Answers

I recently published an NPM package, self-aware-grid, for helping with this kind of thing. It determines which elements are on which column and row, and applies CSS classes accordingly so you can style those elements however you see fit.

I haven't tested it on grids with children of varying sizes, so I would expect that, unless by some serendipitous accident, only same-size children are supported.

If you want to try it out:

user_47948910
Related