[css-grid-1][css-grid-2] Basic support for "equal gutter" with justify-content on grid items

[hunboy]

[css-grid-1][css-grid-2]
https://drafts.csswg.org/css-grid/#gutters

Motivation: the users often want equal (horizontally, vertically) gaps for stilistic reasons.

Currently the grid-row-gap doesn't support the equal value when justify-content is defined.

As a workaround I present 3 javascript algorythms to make equal gutter between the grid items when justify-content is defined.

• space-evenly: https://jsfiddle.net/utasir/20yy425r/13/
• space-around: https://jsfiddle.net/utasir/20yy425r/14/
• space-between: https://jsfiddle.net/utasir/20yy425r/15/

(for testing resize the frame - the 100 value in the script is same as the grid-item's width, so it's hardcoded by constant)

Resolution: So some basic support would be good for gaps. Perhaps "grid-row-gap: auto", or some keyword to define equal gutter for the grid system.

[fantasai]

Just to summarize, the example is

• definite width, auto height grid container
• auto-fill columns e.g. 100px
• auto-placed items
• place-content: space-between
  The spacing produced by space-between is not equal in both axes.

I think there are two possible solutions here:

1. Invent some new syntax to make this happen.
2. Define that if an axis is auto-sized (and therefore justification space would be zero), justification space is instead copied from the other axis. (This is not a far stretch from how we handle frs.)

[tabatkins]

Reusing any existing syntax makes this a level 1 feature, and level 1 has been in feature freeze for some time now, so if we address this it'll be with new syntax.

[fantasai]

Agenda+ to request some ideas. We should fix this by the L2 FPWD.

[css-meeting-bot]

The Working Group just discussed "Equal Gutter" with justify-content.

The full IRC log of that discussion

<frremy> Topic: "Equal Gutter" with justify-content
<astearns> github: https://github.com//issues/1116
<frremy> fantasai: users often want row-gaps and col-gaps to be equal
<frremy> fantasai: but they also want the horizontal gaps to fill the remaining space once you've put as many columns as possible in the width direction
<frremy> fantasai: they can do that using justify-content
<frremy> fantasai: but they cannot transfer this size in the other direction
<frremy> fantasai: this is basically a request for thoughts on the topic
<fantasai> https://github.com//issues/1116#issuecomment-288472394
<fantasai> Just to summarize, the example is
<fantasai> definite width, auto height grid container
<fantasai> auto-fill columns e.g. 100px
<fantasai> auto-placed items
<fantasai> place-content: space-between
<fantasai> The spacing produced by space-between is not equal in both axes.
<frremy> jensimmons: so is the idea { row-gap: as-column-gap }
<frremy> jensimmons: ?
<frremy> TabAtkins: pretty much
<frremy> (general discussion, but it was thought to minute)
<TabAtkins> s/thought/tough/
<frremy> fantasai: the tricky thing is that two things control the gap size
<frremy> fantasai: the gap property
<frremy> fantasai: and the alignment properties
<frremy> fantasai: you do have to consider both to get the desired effect
<frremy> fantasai: and there are interersting cases of space-evenly which creates a gap before the first column and after the last column, we will need to define what to do about that
<fantasai> the gap properties only distribute space between the columns, but alignment can do other things
<frremy> florian: and the proposed syntax would allow to also define alignment in the direction in which you said to copy
<frremy> florian: I think we should have a more restrictive syntax that doesn't allow the impossible cases would be better
<frremy> florian: but I don't have a concrete proposal right now
<frremy> jensimmons: just to clarify, the alignment do not update the gap, they add a gutter right?
<frremy> fantasai: yes, but visually it looks like the same thing
<frremy> jensimmons: so it looks like we want something to transfer the gutter not the gap
<frremy> dholbert: maybe some align: symmetrical then?
<frremy> dholbert: alignment properties already are allowed to increase a gap
<frremy> dholbert: it would be possible to also shrink the gap to make it match, that doesn't sound unreasonable
<dholbert> Or possibly not shrink, but grow-or-leave-the-same (to avoid)
<frremy> Rossen: alright, I think we should probably break out to lunch, and have people interested in this proposal talk with each other
<frremy> Rossen: let's get back here at 1.30
<dholbert> *(to avoid violating author expectations that "grid-row-gap: 100px" should actually insert at least 100px of space)

[fantasai]

Proposal...

Name: align-content, justify-content
New values: [ <number> && <content-distribution>? ]

<number>
: Represents a multiplier against the analogous quantity in the other dimension. If that quantity cannot be determined (e.g. is itself specified as a ratio, or otherwise can’t be referenced), then it is assumed to be zero. Specifically,

• For align-content, 1 represents the amount of space allocated between two adjacent lines/tracks/etc. by the justify-content property. (This value will be zero if justify-content does not allocates space between adjacent alignment subjects either due to not having a <content-distribution> value or due to there being fewer than two alignment subjects.)
• Unless a different <content-distribution> value is specified, space is distributed according to the same <content-distribution> rules as for justify-content.
• The behavior of a <number> value for justify-content is analogous to align-content.
• If both align-content and justify-content have <number> values, then justify-content’s number value has no effect. justify-content takes align-content’s <content-distribution> value, if one was specified, and falls back to space-between otherwise.

Note: This value can force extra space to be placed in gutters even when there is no free space left, causing oveflow.

In this example, a minimum of 1em is required between rows and columns. Additionally, any extra space in the inline axis that is distributed between columns, with full-size spaces on either side of the outermost columns. The gaps between rows are increased to match the extra space distributed between adjacent columns, but no space is added before the first row or after the last one.

.grid {
  grid-template-columns: repeat(auto-fill, 15em);
  gap: 1em;
  justify-content: space-evenly;
  align-content: 1 space-between;
}

This next example is the same as the previous, except that the ratio between row and column gaps is φ:

.grid {
  grid-template-columns: repeat(auto-fill, 15em);
  gap: 1em 1.618em;
  justify-content: space-evenly;
  align-content: .618 space-between;
}

... Thoughts?

[javifernandez]

I'm not sure if the new value's syntax should allow 'stretch'. Maybe I don't understand completely the proposal, but what would be the behavior of align-content: 2 stretch ?