0

Is it possible to style a CSS grid cell based on auto-fit/cell position?

Here is the UI. The very first grid item has a border to the right to separate/indicate it is the selected time zone.

enter image description here

And here is the CSS for it. Each cell is assigned the .preview class and only the first cell is assigned the .selected-item class.

.date-time-grid {
    display: grid;

    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 1rem;
    height: 100%;
    text-align: center;

    .preview {
        padding: 0.3rem;

        &.selected-item {
            background-color: rgba(255, 255, 255, 0.09);
            border-right: 2px solid white;
        }
    }

}

When the user resizes the screen the grid auto-fits the cells.

Is it possible to get rid of the right border by detecting that the first cell now sits alone on the first row?

enter image description here

TugboatCaptain
  • 3,864
  • 3
  • 43
  • 74
  • does this help? https://stackoverflow.com/questions/51327802/how-to-get-the-grid-coordinates-of-an-element-using-javascript – Sigurd Mazanti May 21 '22 at 11:19

0 Answers0