.container:gap { background-color: red; }
Possible with a :gap-horz and :gap-vert (or whatever css like to name it) to get seperate vertical and horizontal gaps.
Also: .container:gap:nth-gap(2n) { color: blue; } to get alternating colors.
My “theory of layout” is that no element should have any styling that relates to its relationship with other elements. Gap is very useful for establishing spacing.
:gap ( -[inline\block] ( -[start/end] ) )
You know how the shorthands work elsewhere, so this just replicates that.
Not sure about content: though, that could get weird.
[0] https://practicaltypography.com/rules-and-borders.html [1] https://en.m.wikipedia.org/wiki/Ruled_paper
This proposal extends this mechanism to be more general.
Yeah they were ugly and looked like they came straight out of the Netscape 2.0 era (because they did) but that’s nothing CSS couldn’t have fixed.
This issue has been addressed for well over a decade.
Is the first line of everyone's css files not just:
* { box-sizing: border-box; }
<content1> <content2> <content3>
If you start out with equally spaced columns, and then you add borders to content2 and content3 to end up with this visually:
<content1> <border> <content2> <border> <content3>
The DOM actually looks like this:
<content1> <border content2> <border content3>
Now content2 and content3 are smaller than content1, because the borders are part of their width. Borders are the wrong tool for this job no matter the value of box-sizing.
That’s sarcasm, obviously. But man, I’ve spent so many hours over the years hacking little lines between HTML boxes.
With modern CSS you can typically handle separators with a single selector and property like:
.things .thing:not(:last-child)
{
border-bottom: 1px solid gray;
}
this is just `display: grid` though, and not for non-fixed width elements – the hacker news nav bar is an example where the | between links—on small screens—will either appear at the end of the first line, or at the start of the second line
It’s also for flexbox
> and not for non-fixed width elements
What’s this mean? The biggest thing grid can’t do is wrapping; is that what you mean?
I sure as hell hope not. It would be groundhog day.
If we don't remember the past we are doomed to repeat it as they say.
https://store.nytimes.com/cdn/shop/products/new-york-times-f...
If you’re against established, commonly accepted best practices for design, then I can’t argue with you — everyone is entitled to their own opinions, as unpopular as they may be.
Obviously that's how a "designer" or "software engineer" would display items that require whitespace between them.
This proposal is for when you do want something other whitespace.
> Images in gap decorations. Compared to, say, border-image, gap decoration images need to cover significantly more cases such as T intersections. See this comment for more detail. Further exploration is needed into the best way to handle these, so this scenario is left to a future level of the feature.
Oh, then I want a line that's 40px, or 5em high.. but I can't.
Not sure what the actual benefit in most cases would be compared to flexbox and have separator elements in there.
At least it's something, but the spec is quite shallow.. I feel like writing specs for many is a covert way to boost CVs.
Anyway, it's good to put your thoughts paper and have other look at it.
