[css-align][css-grid] Suggestion: Flexible Grid Gaps

[thatcort]

It would be useful to be able to allocate extra space in a grid to the space between grid items. This would allow the grid cells to be sized according to their row/column max-content while still allocating space around them. To do this I suggest the option of specifying the row/column gap with a flexible length fr value.

This is different than justifying items within flexible grid cells since it retains the uniform column/row edges regardless of varying sizes of contained grid items.

Motivating use case:
CSS grids have been a huge help in laying out complex tabular data and components. Imagine a table that contains both right-aligned numerical columns and left-aligned text columns. As the table grows in width I would like the columns to remain horizontally compact, but equidistant from each other. Allocating space to the grid tracks results in problems: If a numerical column is set to justify-end, it will bump up against the next left-aligned column. If columns are set to justify-center within the column there will be a ragged edge as the items are of varying widths. Instead we want a column that doesn't grow and column gaps that do.

[SelenIT]

Is the result of distributing extra space between columns using justify-content: space-between significantly different from this proposal?

[Loirooriol]

Yeah, you don't want to distribute grid items within the grid areas, it sounds like you want to distribute grid tracks within the grid container. https://drafts.csswg.org/css-align-3/#distribution-grid

[tabatkins]

Yeah, the content-distribution properties (align-content, justify-content) do precisely this. They don't allow arbitrary control over gap sizing (so you can't, for example, have one gap be twice as large as the rest), but they should cover all the common cases.

Since you +1'd Oriol's comment, we'll go ahead and assume that closing this is acceptable. ^_^

[thatcort]

I +1'd Oriol's comment because I thought he was agreeing with me. Please reopen and remove the tags! I'll create an image to illustrate what I mean. The current functionality does not cover this use case that I feel is rather common.

[thatcort]

Here is a quick diagram that attempts to illustrate the problem:

The black table is the grid and the blue rounded rectangles are components placed within it. In the top image the columns end up poorly spaced with right- and left-aligned columns awkwardly bumping up against each other or leaving huge gaps between them. In the bottom image the orange shaded areas are grid gaps sized based on the available free space, so that the columns retain their start/end justification and are also evenly spaced.

[Loirooriol]

@thatcort We understand your usecase. We don't understand why justify-content: space-between doesn't cover your usecase.

[SelenIT]

@thatcort here is a demo of distributing free space between columns using justify-content (based on your diagram): https://codepen.io/SelenIT/pen/oNZOKPz. Doesn't it solve your case?

[thatcort]

Thanks for replying. Yes, I think you are correct that justify-content does most of what I needed. Please close this ticket.

…

On Mon, Jun 21, 2021 at 8:14 AM Ilya Streltsyn ***@***.***> wrote: @thatcort <https://github.com/thatcort> here is a demo of distributing free space between columns using justify-content (based on your diagram): https://codepen.io/SelenIT/pen/oNZOKPz. Doesn't it solve your case? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6275 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADATOMQMULSD5G3COVIQQ43TT4UIVANCNFSM44LCWUOQ> .

[kizu]

Just wanted to mention a case that justify-content does not cover: we could want to limit the amount of space distributed. Imagine we would have something like gap: clamp(1rem, 1fr, 5rem) — this could work similarly to having a gap + having a justify-content, where the gaps would try to use the remaining space, but could increase to max of 5rem.

Link to a mastodon thread by @matuzo where I saw a case that could benefitted from the fr for gaps: https://front-end.social/@matuzo/110236145041434483

The only workaround for this that I found involves adding extra elements that would be used instead of the gaps — https://codepen.io/kizu/pen/gOBLyRR?editors=1100

Video showing how this works in action:

Screen.Recording.2023-04-21.at.13.02.49.mov

[thatcort]

Chrome finally implemented subgrid, so I was finally able to test out using justify-content: space-between in our production app and it helps enormously, but still isn't ideal. The problem with space-between is that every column gap is identical. In our tables it would be far preferable to have some columns but up against each other (e.g. checkbox column with a name column) and others far apart. There are workarounds, but being able to specify fr units on column gaps would be really, really nice.