5 ms·

Still not sure I get it. CSS makes it very easy to carve-out elements because of selector specificity. .content * { max-width: 65ch; margin: 0 auto; }

Still not sure I get it. CSS makes it very easy to carve-out elements because of selector specificity. .content * { max-width: 65ch; margin: 0 auto; } .content img { max-width: 100%; width: 100%; } It's a neat demo of CSS Grid, for sure, but the above would be my much preferred way of doing this kind of layout. Maybe if there were a need for elements (quotes, callouts, etc.) in the side columns alongside the content, then it makes more sense to use Grid.

vbernat 6y ago
You would get a ragged left margin if you have elements less than 65ch wide.
- akersten 6y ago
  I left out some assumptions for brevity, but my presumption was that everything inside of the container (like p tags) would be display: block, so it would try to fill the max-width of 65ch with blank space anyway.
- krsdcbl 6y ago
  you actually wouldn't, as these smaller elements still get centered by the auto margin
uryga 6y ago
i think your version will break a bunch of common uses of `margin-{left,right}`; e.g. indenting like blockquote { margin-left: 15px; /* ... */ } won't work properly (it'll go all the way to the left). i haven't checked, but i think that in the grid version, you'd get an indent as expected. and i think that's the grid version's main advantage – it doesn't "use up" `margin` and `max-width`, so you're free to use them to style stuff that appears in the body. feels a bit more composable, though at the cost of also feeling massively overcomplicated :/
- FZY0E1RnLM 6y ago
  This might be solved by putting the margin on .content and using negative space for full-bleed elements, as in: .content { width: 65ch; margin: 0 auto } .content .full-bleed { width: 100vw; margin-left: calc((65ch - 100vw) / 2); }
  - uryga 6y ago
    yeah, that's the most common way of doing it afaik
shawnz 6y ago
Indeed the grid based solution in the article depends on selector specificity in exactly the same way as this.

vbernat 6y ago

You would get a ragged left margin if you have elements less than 65ch wide.

akersten 6y ago
I left out some assumptions for brevity, but my presumption was that everything inside of the container (like p tags) would be display: block, so it would try to fill the max-width of 65ch with blank space anyway.
krsdcbl 6y ago
you actually wouldn't, as these smaller elements still get centered by the auto margin

uryga 6y ago

i think your version will break a bunch of common uses of `margin-{left,right}`; e.g. indenting like blockquote { margin-left: 15px; /* ... */ } won't work properly (it'll go all the way to the left). i haven't checked, but i think that in the grid version, you'd get an indent as expected. and i think that's the grid version's main advantage – it doesn't "use up" `margin` and `max-width`, so you're free to use them to style stuff that appears in the body. feels a bit more composable, though at the cost of also feeling massively overcomplicated :/

FZY0E1RnLM 6y ago
This might be solved by putting the margin on .content and using negative space for full-bleed elements, as in: .content { width: 65ch; margin: 0 auto } .content .full-bleed { width: 100vw; margin-left: calc((65ch - 100vw) / 2); }
- uryga 6y ago
  yeah, that's the most common way of doing it afaik

shawnz 6y ago

Indeed the grid based solution in the article depends on selector specificity in exactly the same way as this.