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.
> 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.