Hacker News Reader

Comment by jordwest | Hacker News Reader

This selector has saved me an inordinate amount of time hacking together UIs quickly:

    .vertical-stack > :not(:last-child) {
      margin-bottom: 8px
    }

Just add the class to a parent and all the children will have spaced between, but no spacing around the edges. It’s then easy to add padding to the parent:

    <div class=“vertical-stack”>
      <h1>Heading</h1>
      <p>Paragraph</p>
      <p>Paragraph</p>
    </div>

View on HN

This is a bit easier these days with Grid. You can set grid-template-columns: 1fr; and use gap: 20px; to control the spacing which feels much more natural. You can then pad as you like.

edit: realise this is at the end of the article so you probably already know this

`gap` is available on Flexbox in most browsers since earlier this year.

Currently it's ~86% according to caniuse.com. I think it's still a bit low to be used comfortably.

Good enough for vertical markets and admin/back-office apps.

It doesn't work on iOS 13 only grid gap works

This means that it won't work in a builtin browser of a smartphone made 5 years ago.

I think that average quality websites made for public Internet should use only features that have been supported at least for 5 years in major browsers including mobile. And a high quality site must be usable in 10-years old browser.

Yeah I have a variation of this too. stack-y-<size> and stack-h-<size> for horizontal spacing. This combined with Flex makes a lot of layout implementations easy.

I am always using negative margins on container for this.

If you want to keep doing this, it’ll save you a whole lot of heartache if you also wholesale prevent margin collapsing. In fact, some people recommended that as a baseline default (I personally find it great for layout but surprisingly mixed for typography).

If only we had <sizer> (or display:sizer) element that could expand, disappear on wrap and not count as a regular child (sort of like a space in a text node)… But that would be so '90s.

I really think CSS gap is going to cover most of these needs. Adding decorative nodes to the DOM doesn’t seem like a good solution.

decorative nodes to the DOM doesn’t seem like a good solution

Why? You could add the same constraints to the sizer: min, max, flex shrink/grow, put a line or any other shape in it. It wouldn’t even take a separate “display” mode, just make :row-start, :row-end and :row-wrap pseudoclasses to control collapsibility of regular divs at the sides of a container (or whatever styling you need, anything). Instead they feed us yet another crippled special case with these gaps.

And then you can’t nest one container into another, because there is only one “margin” rule and they don’t add up. You start to wrap children into separate containers only to find out that it breaks more and more “nice and simple css tricks” you used before. Eventually you end up with half-broken bootstrap/etc clone that even supports component design if looked at from afar. After few weeks it starts to feel like not using components at all would be much less of a maintenance. Css “tricks” are full of these situational traps.

Reply on news.ycombinator.com