We got some author feedback around unwanted gap decorations appearing next to empty grid areas. Examples:
MicrosoftEdge/MSEdgeExplainers#1099 - unwanted decorations in the empty space to the left of the content area:
MicrosoftEdge/MSEdgeExplainers#1100 - unwanted decoration in the top row, to the left of "Other things about me":
MicrosoftEdge/MSEdgeExplainers#1111 - live version https://codepen.io/bigandy/pen/vENxYzV - unwanted decorations after the last article:
For the first two cases, I suggested two options: Gap Decoration Areas to set different decorations for different sub-areas of the grid using grid lines, or a new property to define how gap decorations interact with empty grid areas, similar to how we have empty-cells for tables. In both of those two cases, the authors expressed a preference for Gap Decoration Areas.
The third case is more interesting. It's a responsive grid that re-flows the contained articles based on how wide the container is. I don't see how Gap Decoration Areas might solve the unwanted decorations in such a case, at least not without script to support. So I think this is a good use case for a property to control decorations in empty grid areas.
Perhaps that property is empty-cells, though I think in this case there would need to be three states: (1) decorations in all gaps; (2) decorations in gaps with an item on at least one side; (3) decorations in gaps with items on both sides. In offline discussion with @alisonmaher @oSamDavis @jav099 last week, it also came up that there may be cases where the author wants different behaviors in each direction.
We got some author feedback around unwanted gap decorations appearing next to empty grid areas. Examples:
MicrosoftEdge/MSEdgeExplainers#1099 - unwanted decorations in the empty space to the left of the
contentarea:MicrosoftEdge/MSEdgeExplainers#1100 - unwanted decoration in the top row, to the left of "Other things about me":
MicrosoftEdge/MSEdgeExplainers#1111 - live version https://codepen.io/bigandy/pen/vENxYzV - unwanted decorations after the last article:
For the first two cases, I suggested two options: Gap Decoration Areas to set different decorations for different sub-areas of the grid using grid lines, or a new property to define how gap decorations interact with empty grid areas, similar to how we have
empty-cellsfor tables. In both of those two cases, the authors expressed a preference for Gap Decoration Areas.The third case is more interesting. It's a responsive grid that re-flows the contained articles based on how wide the container is. I don't see how Gap Decoration Areas might solve the unwanted decorations in such a case, at least not without script to support. So I think this is a good use case for a property to control decorations in empty grid areas.
Perhaps that property is
empty-cells, though I think in this case there would need to be three states: (1) decorations in all gaps; (2) decorations in gaps with an item on at least one side; (3) decorations in gaps with items on both sides. In offline discussion with @alisonmaher @oSamDavis @jav099 last week, it also came up that there may be cases where the author wants different behaviors in each direction.