Full-Bleed Layout Using CSS Grid
joshwcomeau.com
Full-Bleed Layout Using CSS Grid
1–10 of 277 posts
Re: Full-Bleed Layout Using CSS Grid
#2This is actually a really neat technique. I've done full-bleed layouts before grid was around, but it required messing around with negative margins, which is fragile and hard to get right.
Re: Full-Bleed Layout Using CSS Grid
#3This is actually a really neat technique. I've done full-bleed layouts before grid was around, but it required messing around with negative margins, which is fragile and hard to get right.
Yes, I always have to play around with some variant of
margin: 0 calc(50vw - 50% - 1rem);
Re: Full-Bleed Layout Using CSS Grid
#4Wait 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.
Re: Full-Bleed Layout Using CSS Grid
#5Not only is this a nice technique, it's also a nice introduction to several key CSS Grid concepts.
Re: Full-Bleed Layout Using CSS Grid
#6Great 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?
Re: Full-Bleed Layout Using CSS Grid
#7Great 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 { .. }
Additionally, as a more specific issue, the static-site generator that I use renders markdown such that images are inside a paragraph, so your approach wouldn't work at all for me.
Edit: As an aside, that's a super fun site! Lots of neat little UI easter eggs.
Re: Full-Bleed Layout Using CSS Grid
#8Wait 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?
Re: Full-Bleed Layout Using CSS Grid
#9Did anyone else get weird screen flickering[0] from the animated stars used in a few places on this site? The dev-tools show the stars are elements being added/removed dynamically. The animation is cutesy, but the flickering is annoying.
FF 80.0.1 MacOS 10.14 (yeah it's old)
Re: Full-Bleed Layout Using CSS Grid
#10> 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 {}
.wrapper :is(h1,p) {}
.wrapper > :not(.full-bleed) {}
.wrapper { h1,p {} }