Re: [csswg-drafts] [css-grid] `auto-fit` behaves like `auto-fill` if an element spans all columns or rows (#2956)

I believe I have a use-case for this. I have:

* A grid with a variable/unknown number of items
* Items have a box shadow that extend outside of the item box (box shadows of adjacent items overlap each other in the gutters)
* Want to implement a "collapsed" state where only the first two rows of items are visible

I'd like to do this using a third row as spacing, to push down hidden items and also hide their box shadow:

```css
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.grid.collapsed {
    grid-template-rows: auto auto 50px;
    grid-auto-rows: 0;
    margin-bottom: -50px;
    overflow: hidden;
}

.grid.collapsed::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 3;
}
```

When there are enough items to fill the first row, there are no issues (and `auto-fit` doesn't come into play). When there are not enough items to fill the first row, the `::before` pseudo-element spanning all columns causes `auto-fit` to behave like `auto-fill`, leaving a gap at the end of the row.

(I'd also be interested in any alternative ways to implement this collapsed state.)

-- 
GitHub Notification of comment by jefferyto
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2956#issuecomment-2182032844 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 21 June 2024 05:34:28 UTC