Hacker News Reader

Comment by Atomskun | Hacker News Reader

Wait until Web developers find about setting a width and horizontal margins: auto on a block container again.

As a matter of fact, that would require even less attributes to work compared to the method presented in the article.

Since the element you're trying to apply the full-bleed to lives in a container that has a max-width, wouldn't you need to play with negative margins or absolute positioning to accomplish this with only margins?

Don't apply the max-width on the container but on selected children only.

I guess it's time for bettermotherfuckingwebsite.com gridless version to hit HN :)

This is not really CSS magic:

  main>*{max-width:65ch;margin: 1em auto}
  .full-bleed{width:100%;max-width:none}

Here’s an example on my site: https://chrismorgan.info/blog/rust-fizzbuzz/

That’s left-aligned (margin-left: 0; margin-right: 0) rather than centre-aligned (margin-left: auto; margin-right: auto), but it gets the point across. Headings, paragraphs, list items, &c. all get their widths constrained (deliberately to different points, in my case, which wouldn’t work if you were going centre-aligned), but figures can be full-bleed simply by not having that max-width (though in my case they still need negative side margins, but of known values).

Doesn't that just make it tricky to put stuff in the sidebars again? The article doesn't really talk about that but it is implied.

For a sidebar alone, you don't need CSS grid (probably obvious). The point of this article, i.e. having something full-bleed, is implemented by adding a specific class to the element. Which means you would always have a DOM similar to

    </something that gets closed>
    <full bleed>
    ...
    </full bleed>
    <next>
    ...

My point is that now, with a new block element in the hierarchy, it would fill the maximum width anyway. It is only because of being inside a CSS grid that you now have to work around the grid positioning which means adding more CSS attributes.

The exception would be if you would want the full bleed element directly under the sidebar (in terms of z-index). Here CSS grid is useful, but this is probably a special case anyway.

Reply on news.ycombinator.com