Skip to content

[css-align][css-grid-2] Add new value 'meet' to align-content/justify-content #2610

@MatsPalmgren

Description

@MatsPalmgren

Issue #2285 discusses the possibility of allowing the author to re-distribute the track sizes locally in a subgridded axis. In that case, it would be nice to be able distribute them so that the subgrid's grid gap is center-aligned with the corresponding gap in the parent grid when possible. This is what the proposed meet value is for. For example, using gap: 40px in the parent grid (and all rows are auto-sized) and row-gap: 10px on the subgrid:
rachel_andrew_subgrid_example-meet-40-to-10-gap
(I've included our devtools grid overlay on the first subgrid for clarity)

A few notes on my prototype implementation of this:

  • align-content/justify-content: normal behaves as meet in a subgridded axis
  • align-content/justify-content: meet behaves as stretch in a non-subgridded axis
  • if the tracks would overflow the subgrid content area then it is treated as overflowing and fallback alignment occurs instead, the same as content-distribution in a non-subgridded axis would. (This implies that a subgrid gap value that is larger than its parent's triggers fallback alignment (unless the subgrid box has a definite size that makes it not overflow) and that tracks never shrinks in the subgrid.)
  • the default fallback alignment for meet is the same as for stretch
  • tracks with a fixed track-sizing function are not stretched and may thus cause the adjacent gap to be unaligned (the subgrid's gap value is always honored), gap alignment then snaps back after the next resizable track

Here's the same example, but with the first row having a 100px sizing function:
rachel_andrew_subgrid_example-100px-fixed-row1
Note how the first gap can't be aligned with the parent due to the fixed track size and how the second row grows to align the next gap.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions