Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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.


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 :/


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);
  }


yeah, that's the most common way of doing it afaik


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


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


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.


you actually wouldn't, as these smaller elements still get centered by the auto margin




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: