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

**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?**

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

Received on Friday, 12 January 2018 20:23:08 UTC