Intent to Prototype: Gutters in flexbox: row-gap and column-gap properties

[David Grogan]

Contact emails dgr...@chromium.org Explainer https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap#Flex_layout Design docs/spec Specification: https://www.w3.org/TR/css-align-3/#column-row-gap https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap TAG review None. This was discussed in CSSWG in 2017, has been in the spec since, and has shipped in FF. Summary This css property allows you to specify spacing between flex items and/or flex lines. Motivation Developers can get close to this functionality with the margin and padding properties but there are limitations. Cribbing from https://gist.github.com/OliverJAsh/7f29d0fa1d35216ec681d2949c3fe8b7 : margin collapsing would break gutters when nesting gutter containers, e.g. https://jsfiddle.net/OliverJAsh2/Lwxyt07p/6/ any width specified on the gutter item would not be inclusive of the gutter, e.g. https://jsfiddle.net/OliverJAsh2/p8e50c6m/1/ Risks

Interoperability and Compatibility We intend to ship the same behavior of Firefox so hopefully will not have compat problems. The main interop risk is that WebKit doesn't implement. Firefox: Shipped (https://bugzilla.mozilla.org/show_bug.cgi?id=1398483) Edge: No public signals Safari: No public signals Web developers: Positive (https://crbug.com/762679) 345 stars Ergonomics This feature should be familiar to developers because it already works in multi-col and grid layouts.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)? Yes Is this feature fully tested by web-platform-tests? No Not yet _fully_ tested. There are 4 tests at https://wpt.fyi/results/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox?label=master&label=experimental&aligned&q=row-gap Link to entry on the Chrome Platform Status https://www.chromestatus.com/feature/6031643502444544

This intent message was generated by Chrome Platform Status.

[Chris Harrelson]

On Fri, Jan 24, 2020 at 12:19 PM David Grogan <dgr...@chromium.org> wrote:

Safari: No public signals

Could you file a Safari bug to encourage implementation?

 

Web developers: Positive (https://crbug.com/762679) 345 stars Ergonomics This feature should be familiar to developers because it already works in multi-col and grid layouts.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)? Yes Is this feature fully tested by web-platform-tests? No Not yet _fully_ tested. There are 4 tests at https://wpt.fyi/results/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox?label=master&label=experimental&aligned&q=row-gap Link to entry on the Chrome Platform Status https://www.chromestatus.com/feature/6031643502444544

This intent message was generated by Chrome Platform Status.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOZbSt0fM0M47kyW6Hieiu%3DJ4qybTdREcjZtso8aWMsqywxAHQ%40mail.gmail.com.

[Adam Argyle]

There are tests, they're just chillin in a PR https://github.com/web-platform-tests/wpt/pull/20414

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw_pQHu8V5bDcJ2z5U7w9APueZFNymLEb9BMui2k3VEVUQ%40mail.gmail.com.

[David Grogan]

https://bugs.webkit.org/show_bug.cgi?id=206767

On Fri, Jan 24, 2020 at 12:25 PM Chris Harrelson <chri...@chromium.org> wrote:

[PhistucK]

Just to make sure - this means the existing gap (formerly grid-gap) will also work as a shorthand for these properties, right?

☆PhistucK

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOZbSt0JBrV3YsbzOeb5THUNcUuUfdwpV9pwNTJjCo%2BUTgq%3DfA%40mail.gmail.com.

[David Grogan]

Yes, gap will work as a shorthand. I should have mentioned that.

[Manuel Rego Casasnovas]

Just curious, are you planning to implement this on the "legacy" flexbox
code or only in LayoutNG code?

Bye,
Rego

On 24/01/2020 21:19, David Grogan wrote:
> Contact emails...@chromium.org
> <mailto:dgr...@chromium.org>Explainerhttps://developer.mozilla.org/en-US/docs/Web/CSS/column-gap#Flex_layoutDesign
> docs/specSpecification:
> https://www.w3.org/TR/css-align-3/#column-row-gaphttps://developer.mozilla.org/en-US/docs/Web/CSS/row-gapTAG
> reviewNone. This was discussed in CSSWG in 2017, has been in the spec
> since, and has shipped in FF. SummaryThis css property allows you to

> specify spacing between flex items and/or flex lines.

> MotivationDevelopers can get close to this functionality with the margin

> and padding properties but there are limitations. Cribbing from
> https://gist.github.com/OliverJAsh/7f29d0fa1d35216ec681d2949c3fe8b7:
> margin collapsing would break gutters when nesting gutter containers,

> e.g. https://jsfiddle.net/OliverJAsh2/Lwxyt07p/6/any width specified on

> the gutter item would not be inclusive of the gutter, e.g.
> https://jsfiddle.net/OliverJAsh2/p8e50c6m/1/Risks
> Interoperability and Compatibility We intend to ship the same behavior
> of Firefox so hopefully will not have compat problems. The main interop

> risk is that WebKit doesn't implement. /Firefox/: Shipped
> (https://bugzilla.mozilla.org/show_bug.cgi?id=1398483) /Edge/: No public
> signals /Safari/: No public signals /Web developers/: Positive

> (https://crbug.com/762679) 345 stars Ergonomics This feature should be
> familiar to developers because it already works in multi-col and grid
> layouts.
> Will this feature be supported on all six Blink platforms (Windows, Mac,

> Linux, Chrome OS, Android, and Android WebView)?Yes Is this feature
> fully tested by web-platform-tests
> <https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md>?No

> Not yet _fully_ tested. There are 4 tests at
> https://wpt.fyi/results/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox?label=master&label=experimental&aligned&q=row-gap

> <https://wpt.fyi/results/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox?label=master&label=experimental&aligned=&q=row-gap>Link

> to entry on the Chrome Platform

> Statushttps://www.chromestatus.com/feature/6031643502444544

> This intent message was generated by Chrome Platform Status

> <https://www.chromestatus.com/>.

>
> --
> You received this message because you are subscribed to the Google
> Groups "blink-dev" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to blink-dev+...@chromium.org

> <mailto:blink-dev+...@chromium.org>.

> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOZbSt0fM0M47kyW6Hieiu%3DJ4qybTdREcjZtso8aWMsqywxAHQ%40mail.gmail.com

> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOZbSt0fM0M47kyW6Hieiu%3DJ4qybTdREcjZtso8aWMsqywxAHQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.

[David Grogan]

Most likely both because we think we can do it in shared logic. It's unclear which will ship first, FlexNG or gap support, but it shouldn't matter much.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/685ddd27-2c68-0a5e-34f3-b7a5d4b79add%40igalia.com.