Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-grid] Styling Grid Gaps/Gutters #2748

Open
fantasai opened this issue Jun 7, 2018 · 14 comments
Open

[css-grid] Styling Grid Gaps/Gutters #2748

fantasai opened this issue Jun 7, 2018 · 14 comments

Comments

@fantasai
Copy link
Collaborator

@fantasai fantasai commented Jun 7, 2018

There's been a number of requests for styling grid gaps (gutters). We have a column-rule property from the multicol module we should probably try to re-use, but the styling requirements for grids are more complicated due to e.g. spanning elements, which we have to figure out what to do with.

There's also styling requirements that apply to both multicol and grid that we aren't meeting. (E.g. having the rule start not flush with the top/bottom of the column boxes but somewhat inset, various fancier graphical effects than a simple “line”.)

Basic line rules that can reasonably interact with spanning elements is the top priority, but we should have some idea at what else we might need to accommodate in the future.

This is a placeholder issue to collect use cases and examples, so that we understand problems we need to handle before we try to design a solution. Please add suggestions/examples/ideas/drawings/background info/warnings/suggestions/anything else that seems like it might be helpful! While we're unlikely to handle 100% of all the graphic design capabilities the Internet can imagine, we should at least aim to handle the more common cases.

@tsiq-swyx

This comment has been minimized.

Copy link

@tsiq-swyx tsiq-swyx commented Jun 8, 2018

Just adding a couple common questions and our twitter discussion:

my use case - if i were to make this table and didnt want to use border-bottom or add (a few) extra 1px elements:

image

grid-row-gap-color: gray might do it? i am definitely not the guy to ask about coming up with css specs haha

I understand the conflict between columns and rows, but i would only use one or the other myself.

another way to do it would be to style between named or numbered line markers.

i love that you are still willing to consider this, please keep it up!

@fantasai

This comment has been minimized.

Copy link
Collaborator Author

@fantasai fantasai commented Jun 8, 2018

@tsiq-swyx If you were to make that table, please, please use <table> markup? :) Data tables should be marked up with data table markup.

@watershed

This comment has been minimized.

Copy link

@watershed watershed commented Dec 11, 2018

Hi. Rachel Andrew kindly let me know about this open issue. I've put a Pen together which I hope is a relevant use case: Horizontal lines between CSS grid rows.

@SebastianZ

This comment has been minimized.

Copy link
Contributor

@SebastianZ SebastianZ commented Dec 12, 2018

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-rules 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>

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.

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

Examples:

gap-rule: 1px solid silver; /* equal to the existing column-rule: 1px solid silver; */
gap-rule: 2px 80% dotted blue; /* draws a 2px wide blue dotted line spanning 80% of the length of the gutter */
gap-rule: 10px calc(100% - 20px) url(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

@SebastianZ

This comment has been minimized.

Copy link
Contributor

@SebastianZ SebastianZ commented Dec 12, 2018

Here are the examples including their output:

gap-rule: 1px solid silver;

Example for gap-rule: 1px solid silver;

gap-rule: 2px 80% dotted blue;

Example for gap-rule: 2px 80% dotted blue;

gap-rule: 10px calc(100% - 20px) url(rule.svg)

Example for gap-rule: 10px calc(100% - 20px) url(rule.svg)

gap-rule-interrupt: continuous;

Example for gap-rule-interrupt: continuous;

gap-rule-interrupt: interrupt continuous;

Example for gap-rule-interrupt: interrupt continuous;

Sebastian

@watershed

This comment has been minimized.

Copy link

@watershed watershed commented Dec 13, 2018

Good stuff Sebastian.

My only observation is that because grid-gap specifies the row gap first and the column gap optionally second, it is a bit odd for a property such as gap-rule-interrupt to do the inverse: specify the column interrupt first and the row interrupt second.

There should be a consistent pattern.

@SebastianZ

This comment has been minimized.

Copy link
Contributor

@SebastianZ SebastianZ commented Dec 27, 2018

@watershed Right, gap-rule-interrupt should follow the gap syntax, so first the row then the column.

Also, gap-rule-interrupt may be included in the gap-rule shorthand, so the syntax for it would then be like this:

gap-rule: [ <'gap-rule-width'> <'gap-rule-length'>? ] || [ [ <'gap-rule-style'> ||
<'gap-rule-color'> ] | [ <'gap-rule-image'> ] ] || <'gap-rule-interrupt'>{1,2}

So the full value to get the last example would be:

gap-rule: 1px solid silver continuous interrupt;

To allow to set the vertical and horizontal rules individually, the gap-rule property could also be split up in row-gap-rule and column-gap-rule.

Sebastian

@SebastianZ

This comment has been minimized.

Copy link
Contributor

@SebastianZ SebastianZ commented Sep 22, 2019

@fantasai Are there more use cases needed or anything else to push this forward?

Sebastian

@SebastianZ

This comment has been minimized.

Copy link
Contributor

@SebastianZ SebastianZ commented Oct 19, 2019

It wasn't explicitly mentioned yet, but styling gaps should also apply to Flexbox layouts.

Sebastian

@BlueskyFR

This comment has been minimized.

Copy link

@BlueskyFR BlueskyFR commented Nov 17, 2019

Hello,
This is my first post here.
What if it was instead possible to add more options to the current grid-gap property while including @SebastianZ's idea?
Like grid-gap: 10px, grid-gap: 10px 20px, grid-gap: 10px solid black, grid-gap: 10px 20px solid black, grid-gap: 10px 20px url(image.png), grid-gap: 10px 20px solid red solid black continuous interrupt.

What do you think ?

@SebastianZ

This comment has been minimized.

Copy link
Contributor

@SebastianZ SebastianZ commented Nov 18, 2019

Note that grid-gap got renamed to just gap (and also grid-row-gap and grid-column-gap to row-gap and column-gap) in order to be also used in flexbox and multi-column layout.

The rule styles might be applied directly in the gap property but this also brings some disadvantages. First, it would make the lengths ambiguous, because it mixes the sizes of the gaps with the width and length of the rule. Second, it requires you to always define both when you only want to overwrite one of them.

Sebastian

@BlueskyFR

This comment has been minimized.

Copy link

@BlueskyFR BlueskyFR commented Nov 18, 2019

How is it possible to rename a css property?
I mean, this will make incompatible many websites.

@SebastianZ

This comment has been minimized.

Copy link
Contributor

@SebastianZ SebastianZ commented Nov 18, 2019

Having a look at the syntax of my last comment from December 2018, I realized that it missed the optional second interruption value. Therefore I've now added a {1,2} behind it.

Sebastian

@SebastianZ

This comment has been minimized.

Copy link
Contributor

@SebastianZ SebastianZ commented Nov 18, 2019

How is it possible to rename a css property?
I mean, this will make incompatible many websites.

The properties with the grid- prefix are still supported but marked as legacy names, see https://drafts.csswg.org/css-align/#gap-legacy.

Sebastian

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.