Ha, that is interesting. I do UI work mostly in QML these days, and almost all of these issues are something I've dealt with. A couple of months ago, I used the gap between items with background showing through to implement grid lines in a calendar view. It lets the "spacing" property of the layout (and the GPU, more overdraw...) do the work.
Minding the gaps: A new way to draw separators in CSS
41–50 of 99 posts
Re: Minding the gaps: A new way to draw separators in CSS
#42It's a decent idea, but it feels like it would have been more useful a decade ago. 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; } They touch on this in the article but I feel like they're overselling the frequency of edge cases.
they aren't really edge cases, once you do this you add 1px to the layout unevenly - I run into this frustration with grid all the time
Re: Minding the gaps: A new way to draw separators in CSS
#43Note this was written by a "software engineer". A designer would have used white space for separation, not a line.
nonsense, sometimes you want a line
Re: Minding the gaps: A new way to draw separators in CSS
#44this has been a pain point for a long, long time. it's cool to see someone doing something 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
> this is just `display: grid` though 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?
grid can wrap if you auto size columns
Re: Minding the gaps: A new way to draw separators in CSS
#45It's a decent idea, but it feels like it would have been more useful a decade ago. 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; } They touch on this in the article but I feel like they're overselling the frequency of edge cases.
As they say in the article, your solution doesn’t work for even moderately complex layouts. If you want to add a space between elements, margin works wonderfully until those elements can wrap. Gap was introduced because regardless of what happens, there will always be a space between elements. Your solution fails to address the situation gap was introduced to fill.
Re: Minding the gaps: A new way to draw separators in CSS
#46Yeah, I often have this problem and want some better way than a (which doesn’t work in table rows or multi column)
Re: Minding the gaps: A new way to draw separators in CSS
#47> Adding a border changes the size of the items, which might not be desirable 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; } That makes borders figure on the inside of the width rather than the outside. It's far more sane to reason about.
That does not solve the problem in the article. Consider this layout:
If you start out with equally spaced columns, and then you add borders to content2 and content3 to end up with this visually:
The DOM actually looks like this:
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.
Re: Minding the gaps: A new way to draw separators in CSS
#48Earlier quoted context omitted.
Was just wondering that myself.. why they went with "rule" in `column-rule` and now `row-rule`
It’s the correct term from the technical vocabulary of book layout and printing. A rule is a line separating things on a page, while a border is a box.[0]. While the term originates in book printing shops, native English speakers would recognize it most easily from the terms “standard ruled” and “college ruled” as applied to loose-leaf notebook paper, describing the faint blue, printed horizontal lines providing guid…
While that may be true, I’ll say that as a native English speaker that reading is not the most obvious reading of “row rule”, which to me would be “A determinate method prescribed for performing any operation and producing a certain result.”
Indeed a “CSS rule” is already a thing and it has nothing to do with lines.
Re: Minding the gaps: A new way to draw separators in CSS
#49It's a decent idea, but it feels like it would have been more useful a decade ago. 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; } They touch on this in the article but I feel like they're overselling the frequency of edge cases.
Also doesn't really work when e.g. flex items are set to wrap
Re: Minding the gaps: A new way to draw separators in CSS
#50Earlier quoted context omitted.
No, because a ruler is completely different from a rule.
No? Both "rule" and "ruler" can denote this thing also called straightedge; but the word "ruler" is more commonly used in this sense, while "rule" generally means an instruction.
A ruler is called a "ruler" because it has rules.
> A ruler, sometimes called a rule, scale or a line gauge or metre/meter stick, is an instrument used to make length measurements, whereby a length is read from a series of markings called "rules" along an edge of the device.