Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
[css-grid] Styling Grid Gaps/Gutters #2748
There's been a number of requests for styling grid gaps (gutters). We have a
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.
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:
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!
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
So, one approach extending
where the percentage refers to the width of the gutter.
where the percentage refers to the length of the gutter.
being the equivalents for
where the repetition values work like for
The rule is always centered horizontally and vertically within the gutter.
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
allowing to control the horizontal and vertical interruption individually.
I'll try to come up with some visual representations of the examples above.
Good stuff Sebastian.
My only observation is that because
There should be a consistent pattern.
So the full value to get the last example would be:
To allow to set the vertical and horizontal rules individually, the
What do you think ?
The rule styles might be applied directly in the