Re: [csswg-drafts] [css-grid] Styling Grid Gaps/Gutters (#2748)

I believe allowing images of some form within the line gaps together with some way to inset them would cover all use cases.

Also, the name should be general enough to also cover horizontal rules. So it may be aligned to the `gap` property.

So, one approach extending `column-rule`s syntax could be

    gap-rule: [ <'gap-rule-width'> <'gap-rule-length'>? ] || [ [ <'gap-rule-style'> ||
        <'gap-rule-color'> ] | [ <'gap-rule-image'> ] ]

with `gap-rule-width` being an extended version of [`<line-width>`](https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width)

    gap-rule-width = <length-percentage> | thin | medium | thick

where the percentage refers to the width of the gutter.

`gap-rule-length` would be used for insetting (or outsetting) the rule in the orthogonal direction to `gap-rule-width` with an initial value of `100%`

    gap-rule-length = <length-percentage>

where the percentage refers to the length of the gutter.

    gap-rule-style = <line-style>
    gap-rule-color = <color>

being the equivalents for `column-rule-style` and `column-rule-color`.

And the `gap-rule-image` would be defined as

    gap-rule-image = <image> [ stretch | repeat | round | space ]{1,2}

where the repetition values work like for [`border-image-repeat`](https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image-repeat).

The rule is always centered horizontally and vertically within the gutter.

Examples:

    gap-rule: 1px solid gray; /* equal to the existing column-rule: 1px solid gray; */
    gap-rule: 2px 90% dashed blue; /* draws a 2px wide blue dashed line spanning 90% of the length of the gutter */
    gap-rule: 10px calc(100% - 20px) img(rule.svg) /* draws a 10px wide and 10px inset stretched image */

Regarding spanning elements and gutter intersections, there may be another property specifying whether the rules cross the elements or each other or are interrupted. E.g. something like

    gap-rule-interrupt: [ continuous | interrupt ]{1, 2}

allowing to control the horizontal and vertical interruption individually.

Examples:

    gap-rule-interrupt: continuous; /* draws the rule(s) without interruption by spanning elements or crossing rules */
    gap-rule-interrupt: interrupt continuous; /* draws the rule(s) with interruption in vertical direction but not in horizontal direction */

I'll try to come up with some visual representations of the examples above.

Sebastian

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

Received on Wednesday, 12 December 2018 21:55:23 UTC