[csswg-drafts] [css-grid] Removing grid-items from layout calculations in one direction, especially for `auto-fit`

pmccloghrylaing has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] Removing grid-items from layout calculations in one direction, especially for `auto-fit` ==
Spec: https://www.w3.org/TR/css-grid-1/#auto-repeat
Codepen: https://codepen.io/pmccloghrylaing/full/PBJNKG/

I raised an issue previously (#2956) about creating a tabbed layout where the tabs were positioned using `auto-fit` (so they always take up the full width), and the tab panel takes up the full width (using `grid-column: 1 / -1`). This ended up behaving exactly like `auto-fill`. One of the advantages of this approach is it falls back to an accordion.

The solution I ended up using was to applying `position: absolute` to the tab panel so it didn't affect the layout calculations for `auto-fit`. That worked in my particular case because the tab panel was a fixed height with `overflow: auto`, but what I would have preferred is a solution that allowed you to define that a grid item occupied particular columns (or rows) but shouldn't be used in layout calculations in that direction, especially for `auto-fit`.

This could tie in with #2402 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3271 using your GitHub account

Received on Thursday, 1 November 2018 03:08:32 UTC