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

84 views
Skip to first unread message

David Grogan

unread,
Jan 24, 2020, 3:19:59 PM1/24/20
to blink-dev
dgr...@chromium.org https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap#Flex_layout Specification: https://www.w3.org/TR/css-align-3/#column-row-gap https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap None. This was discussed in CSSWG in 2017, has been in the spec since, and has shipped in FF. This css property allows you to specify spacing between flex items and/or flex lines. 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/
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 This feature should be familiar to developers because it already works in multi-col and grid layouts.
Yes 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://www.chromestatus.com/feature/6031643502444544
This intent message was generated by Chrome Platform Status.

Chris Harrelson

unread,
Jan 24, 2020, 3:25:38 PM1/24/20
to David Grogan, blink-dev


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 This feature should be familiar to developers because it already works in multi-col and grid layouts.
Yes 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://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

unread,
Jan 24, 2020, 3:53:27 PM1/24/20
to Chris Harrelson, David Grogan, blink-dev

David Grogan

unread,
Jan 24, 2020, 3:56:19 PM1/24/20
to Chris Harrelson, blink-dev

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

PhistucK

unread,
Jan 25, 2020, 8:23:08 AM1/25/20
to David Grogan, Chris Harrelson, blink-dev
Just to make sure - this means the existing gap (formerly grid-gap) will also work as a shorthand for these properties, right?

PhistucK


David Grogan

unread,
Jan 25, 2020, 9:29:13 AM1/25/20
to PhistucK, blink-dev
Yes, gap will work as a shorthand. I should have mentioned that.

Manuel Rego Casasnovas

unread,
Jan 27, 2020, 8:11:07 AM1/27/20
to blin...@chromium.org
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
> <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>.
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOZbSt0fM0M47kyW6Hieiu%3DJ4qybTdREcjZtso8aWMsqywxAHQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.

David Grogan

unread,
Jan 27, 2020, 2:29:24 PM1/27/20
to Manuel Rego Casasnovas, blink-dev
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.
Reply all
Reply to author
Forward
0 new messages