Description

CSS Flexbox/Grid support for gap decorators as solution to gap borders

Plain tables and CSS columns support native borders, but no such styling exists that supports the flexible gaps of CSS Flexbox and Grid.

Mats Palmgren's drafted spec would solve this issue and provide such styling for both cases including support for border images, similar to existing support for borders in CSS.

Mozilla is already working on this: https://bugzilla.mozilla.org/show_bug.cgi?id=1725495

This has been a long-standing request with no solution but a handful of half-baked workarounds. It'd be great to have a native solution like this one adopted across all major browsers.

Rationale

• [css-grid][css-flexbox][css-multicol] Styling Gaps/Gutters w3c/csswg-drafts#2748 (comment)
• [css-align][css-grid][css-flexbox][css-multicol][css-tables] A proposal for a Gap Decorations feature w3c/csswg-drafts#6748
• https://css-tricks.com/minding-the-gap/#aa-styling-the-gap-in-flex-and-grid
• [css-multicol][css-grid][css-flexbox] CSS styling of Gaps/Gutters
  • WIP: Bug 1725495 part 1 - Add a FrameGapRuleEnumerator interface for enumerating the gap rule rects in a specific logical axis.
  • WIP: Bug 1725495 part 2 - Add CSS 'column-rule-image-repeat/slice/source' properties.
  • WIP: Bug 1725495 part 3 - Implement layout for 'column-rule-image-repeat/slice/source'.
  • WIP: Bug 1725495 part 4 - Add the corresponding 'row-*' variants for the CSS 'column-gap/rule' properties.
  • WIP: Bug 1725495 part 5 - Add CSS 'column/row-rule-image' shorthands.
  • WIP: Bug 1725495 part 6 - Replace nsDisplayColumnRule with a generalized GapRuleDisplayItem.
  • WIP: Bug 1725495 part 7 - Add CSS '[column,row]-length' and '[column,row]-[lateral,longitudinal]-inset-[start,end] properties with shorthands.
  • WIP: Bug 1725495 part 8 - Add CSS '[column,row]-longitudinal-edge-inset-[start,end] properties with shorthands.
  • WIP: Bug 1725495 part 9 - Add CSS '[column,row]-rule[-edge]*-align' and '[column,row]-rule-extent' properties.
  • WIP: Bug 1725495 part 10 - Add a few GapRuleUtils helpers to deal with rule-extent/align style values.
  • WIP: Bug 1725495 part 11 - Add nsContainerFrame::[Block,Inline]AxisRuleRectsProp frame properties for storing gapo rule nsRects for the corresponding logical axis.
  • WIP: Bug 1725495 part 12 - Add nsStyleColumn::GapRuleStyle accessor to conveniently get all the relevant gap rule style values for an axis.
  • WIP: Bug 1725495 part 13 - Implement gap rules for Flexbox containers.
  • WIP: Bug 1725495 part 14 - Implement gap rules for Grid containers (grid and subgrid, but not masonry).
  • WIP: Bug 1725495 part 15 - Implement gap rules for Grid containers with masonry layout.
  • WIP: Bug 1725495 part 16 - Implement gap rules for Table layout.
  • WIP: Bug 1725495 part 17 - Implement gap rules for table-row-group layout.
  • WIP: Bug 1725495 part 18 - Implement 'row-gap' for multi-column layout.
  • WIP: Bug 1725495 part 19 - Implement row gap rules for multi-column layout.

Specification

https://matspalmgren.github.io/css-gap-decorations/Overview.html

Tests

No tests yet, but plenty of related bugs being worked through by Mozilla (links above)