> This is a bad design because you're tying the child elements to the grid layout of the parent

Apart from that sentence carrying very little internal logic and abusing the word "because", there is a simple fix to what, I think, is your point: Name your grid areas.

There is absolutely nothing in CSS Grid specifications that urges you to fill in all the possible areas, or, in fact, any of the areas. Or make it 2D. If you can use it to solve your layout problem in an elegant way, that's a good thing. The solution in the linked article is semantically sound and elegant -- obviously far more elegant than the proposed alternative of adding control markup to every single child.

Set every * to max-width: 65ch and then have the same full-bleed class to go to width: 100%.

I agree with OP that using grid for this is a bit misplaced. But realistically, it probably won’t be a problem.

I also don't like the idea of "reaching in" and setting widths on all children. Feels like this could cause problems, especially on replaced elements like images/videos. Not to mention that it just feels wrong when combined with a component architecture, where I might expect a <Heading> component to control its own destiny. In fairness, my solution also reaches in to apply a grid-column, but grid-column is a property that only makes sense when combined with a parent's `display: grid`. So it bothers me less.

Enough people have brought this up that I wonder if I should have addressed it in the article... but then I realize, it's not my job to argue against or "disprove" all alternative ideas. I'm not claiming that my way is the best way, I'm just sharing a cool trick I found :)

As a side note, I like this technique and have already had a good opportunity to apply it instead of the old padding & negative margins method or even flexbox + stretch (and I like flexbox), neither of which actually worked for this very specific case.

I agree. It’s not that I really think one way is better or worse.

I like flexbox more, but since you’re not working in my codebase, you can do whatever you want ;)

You can make the container have a sensible weight to keep all elements within it, but you cannot have the children contain their own destiny in a consistent manner.

And what a surprise, it's just Safari holding us back again. =_=

Really ecstatic to see that it's going to be in Safari soon though! Thank you so much for sharing! Really made my day.

This is why I love Hacker News.

HA! Chrome absolutely SUCKS at displaying SVGs. I rarely use them and I've already found two stupid bugs.

One super weird one (probably too much caching) where an animated element in a <use> clone didn't inherit colours while its non-animated siblings do. This one is fixed now.

What isn't fixed yet is that `filter: hue-rotate(90deg)` applied to an SVG child element doesn't do anything (in firefox it does), is a pain in the ass because SVG filters, while more powerful, are much harder to set up.

Pick some other phrase for "most popular"

Yes, Chrome does this too.

It's slightly better in that it tends to submit them to standards bodies after implementing them, but most of the time that's WHATWG which is a much less democratic body than others, and mostly Google-led. Either way Chrome's market monopoly leave competitors with little choice in the standards process.

Microsoft definitely takes the blame in keeping it poor for so long but this situation is nothing like Safari which has refused to implement standards that already exist, as well as messing with others in unintuitive ways.

1. https://schepp.dev/posts/today-the-trident-era-ends/

edit: oh and i guess now that i upvoted it it's not grey anymore xD

Safari is not only slow to follow the standards, it is slow to advance the standards. I'd be more likely to believe the spin that Apple just wants to make sure things are done well on the web if it appeared that they were trying as hard to add good, new capabilities to the web platform as they are to add good, new capabilities to iOS.

A engine that isn't Chrome is very essential for keeping the web open

Also essential is for the open web to be competitive with closed alternatives, or the fact that it's open will matter less and less. Apple is quite willing to provide competition for Chrome. It does it with iOS.

Maybe my layouts aren't as fancy as those who know how to neatly proportion their boxes with CSS grid using golden ratios, but I'm quite satisfied that they work and are easy to understand for anyone who knows a thing or two about flexboxes. Sometimes I might have to add an unnecessary wrapper, I admit that. But oh well.

I would — however — never had the idea to abuse it like that. Why not just limiting using max-width on your text-related tags?

The only problem I ever had with that is that markdown generated HTML will wrap <img> into <p> if it follows the standard and as of now there is no CSS way of selecting p without child of type IMG or p only with child of type img..

Now you're limited to having it individually around each group of elements before/after any full-bleed content, instead of the entire set of content.

You can have another .background element which spans all the rows (using grid-row-start and grid-row-end) and positioned in the centre column. Apply the shadows on it, and keep it before the content div in DOM order. That should do it.

(I agree with you on this simple layout)

Tangent: I also remember doing ridiculous things with nested tables during the original browser wars (circa 2001?) and consider it a "first-world problem" to be choosing among standards-based styling mechanisms.