min(ch, ...) is the most interesting and potentially useful thing I've learned!
I'm now off to learn more about this magical "ch" unit.
Full-Bleed Layout Using CSS Grid
11–20 of 277 posts
Re: Full-Bleed Layout Using CSS Grid
#12Wait 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.
Re: Full-Bleed Layout Using CSS Grid
#13It’s beyond me why CSS has to be so hard to understand. I have made several attempts and got it right, but it feels like I have to start at zero every time.
I believe, it’s because CSS is not a programming language, but we are trying to do programming with it. Like: if screen is mobile then render divs stacked. I don’t know
Re: Full-Bleed Layout Using CSS Grid
#14Great article. While CSS grid is very powerful, maybe I'm not seeing the full picture in the examples: aren't the examples possible with just p { margin: 0 auto; max-width: 65ch } ? What does grid bring here?
I think part of it is that there are probably lots of additional items that you want to constrain to the main column, so your CSS would end up looking more like: #content p, h1, h2, h3, nav { .. } Kind of a pain to manually specify each element that you want to constrain, when it's most of them. This approach allows you to instead target the items that you don't want to constrain. Additionally, as a more specific iss…
Then use something like `#content > :not(.full-bleed) { .. }`
Re: Full-Bleed Layout Using CSS Grid
#15Wait 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?
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}Re: Full-Bleed Layout Using CSS Grid
#16Great article. While CSS grid is very powerful, maybe I'm not seeing the full picture in the examples: aren't the examples possible with just p { margin: 0 auto; max-width: 65ch } ? What does grid bring here?
I think part of it is that there are probably lots of additional items that you want to constrain to the main column, so your CSS would end up looking more like: #content p, h1, h2, h3, nav { .. } Kind of a pain to manually specify each element that you want to constrain, when it's most of them. This approach allows you to instead target the items that you don't want to constrain. Additionally, as a more specific iss…
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%; }
Re: Full-Bleed Layout Using CSS Grid
#17> It's relatively easy to constrain all children, but CSS doesn't really have a mechanism to selectively constrain some children. Yes it does. You can use .wrapper h1, .wrapper p {} or soon .wrapper :is(h1,p) {} Alternatively, you can also use .wrapper > :not(.full-bleed) {} And in SCSS (or similar) you can write .wrapper { h1,p {} } (edit: Earlier versions of this comment mentioned :has instead of :is)
I think the point being made was it's not easy to selectively have some children break out of a parent container with a max-width.
Re: Full-Bleed Layout Using CSS Grid
#18It’s beyond me why CSS has to be so hard to understand. I have made several attempts and got it right, but it feels like I have to start at zero every time. I believe, it’s because CSS is not a programming language, but we are trying to do programming with it. Like: if screen is mobile then render divs stacked. I don’t know
CSS is declarative and not imperative. A lot of people have issues with a different kind of programming.
Also the "cascading" nature of CSS makes it hard to reason about.
Re: Full-Bleed Layout Using CSS Grid
#19is there a reason this is better than just putting a max-width on your paragraphs, and margin:auto?
Re: Full-Bleed Layout Using CSS Grid
#20It’s beyond me why CSS has to be so hard to understand. I have made several attempts and got it right, but it feels like I have to start at zero every time. I believe, it’s because CSS is not a programming language, but we are trying to do programming with it. Like: if screen is mobile then render divs stacked. I don’t know
I think it really has more to do with the fact that it was originally only designed with print flow in mind. Like laying out a magazine with columnar text.
When it was initially designed there was an expectation that structural layout would happen outside of it and then you'd flow your text and other inline/block objects within that.
Most everything since then has just been about trying to get css back to the structural flexibility people had in 1996 with tables, while still trying to keep the flow flexibility css brought (and then, as you say, adding on media-type flexibility). It's not a surprise this turned out ugly.