4 ms·

This displays a very mediocre grasp on, at the very least, web semantics and CSS Grid. (Also, an emotional disposition against a simple piece of web technology.

This displays a very mediocre grasp on, at the very least, web semantics and CSS Grid. (Also, an emotional disposition against a simple piece of web technology. Wild.) > 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.

lloydatkinson 6y ago
I fail to see anything in your reply that disputes anything OP said
Aeolun 6y ago
You can use the same trick in a flexbox container? 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.
- joshwcomeau 6y ago
  This doesn't work because `65ch` means very different things depending on the font-size. You need to apply it to a parent class, so that it picks the base font size (I'm not actually sure how this works but in practice it seems to base it on the child <p> tag). 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 :)
  - knathan 6y ago
    There really aren't any scenarios I can think of that an element would need to have `grid-column` set without being wrapped in another grid, so for that reason it is generally safer to set `grid-column` on all children than it is to set `max-width`. I would be surprised if I added an element only to discover that its width was being modified by a wildcard rule, less so with `grid-column` because grid placement is arguably the concern of the grid. 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.
  - Aeolun 6y ago
    > I'm not claiming that my way is the best way, I'm just sharing a cool trick I found :) 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 ;)
- detaro 6y ago
  Doesn't that run in the "ch depends on font and font-size" problem e.g. with headings vs paragraphs again if you don't use wrappers?
  - Aeolun 6y ago
    Hmm, that’s definitely possible, but then I think we probably shouln’t be using that magic unit to begin with.
    - detaro 6y ago
      Why? It specifically exists to make things dependent on the font, and sizing text columns based on the size of the body text, and have other elements follow that, also makes sense.
      - Aeolun 6y ago
        Yes, but with it being dependent on the current font size, its a tad hard to use effectively. 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.

lloydatkinson 6y ago

I fail to see anything in your reply that disputes anything OP said

Aeolun 6y ago

You can use the same trick in a flexbox container? 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.

joshwcomeau 6y ago
This doesn't work because `65ch` means very different things depending on the font-size. You need to apply it to a parent class, so that it picks the base font size (I'm not actually sure how this works but in practice it seems to base it on the child <p> tag). 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 :)
- knathan 6y ago
  There really aren't any scenarios I can think of that an element would need to have `grid-column` set without being wrapped in another grid, so for that reason it is generally safer to set `grid-column` on all children than it is to set `max-width`. I would be surprised if I added an element only to discover that its width was being modified by a wildcard rule, less so with `grid-column` because grid placement is arguably the concern of the grid. 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.
- Aeolun 6y ago
  > I'm not claiming that my way is the best way, I'm just sharing a cool trick I found :) 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 ;)
detaro 6y ago
Doesn't that run in the "ch depends on font and font-size" problem e.g. with headings vs paragraphs again if you don't use wrappers?
- Aeolun 6y ago
  Hmm, that’s definitely possible, but then I think we probably shouln’t be using that magic unit to begin with.
  - detaro 6y ago
    Why? It specifically exists to make things dependent on the font, and sizing text columns based on the size of the body text, and have other elements follow that, also makes sense.
    - Aeolun 6y ago
      Yes, but with it being dependent on the current font size, its a tad hard to use effectively. 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.