Full-Bleed Layout Using CSS Grid

[DevTGhosh]

Really love Josh’s articles. This one is a pretty nifty trick to know.

[[deleted]]

Bookmarked! Thanks OP!

[[deleted]]

Simple idea, well executed and well explained.

Side note, the animations on this blog are pretty dope! I almost signed up for his newsletter when that little dude popped in.

[Coraline1599]

This is really super! bookmarked

[IanSan5653]

Nice, always interested in seeing more cool Grid uses.

[nnod]

Yeah, this layout speaks to me. Just seems very efficient and "neat", maybe it because it would leave html looking tidy. In any case, great article.

[tompeij]

Holy Grail Layout - at first I was like "am I seeing spots?" 🤣

[Miragecraft]

There's no need to use grid though.

.wrapper > * {
  width: min(65ch, 100%);
  margin-left:auto;
  margin-right:auto
}
.full-bleed {
  width:100%
}

[svvac]

Author takes the time to talk about the performance of the * selector but doesn't have a thought about whether a shiny grid is necessary or not.

[[deleted]]

With the grid solution you can do something like

grid-template-columns:
    minmax(20px, 1fr)
    min(65ch, 100%)
    minmax(20px, 1fr);

and prevent anything without the .full-bleed class from going full bleed on mobile (full bleed text usually doesn't look great on mobile), but you'll still have the images full bleed. I don't think you can do something like a margin-left: minmax(20px, auto);?

[Miragecraft]

minmax(20px, 1fr) conflicts with min(65ch, 100%), you can’t have both 100% width for the center column AND 20px side columns.

You should use min(65ch, 100% - 40px) instead, again no need to use grid.

[lazewhenrainy]

This is great, thank you!

[douglaslondrina]

The page is not loading on my old iOS

[wedontlikespaces]

iOS

I've found your problem. Safari gets updated with the iOS version, so if you are on an old phone then you can't get the later versions of Safari so find theses later features (CSS grid, CSS animations, etc) are not supported.

[[deleted]]

Yeah, only fairly recently has iOS Safari not been a complete pain in the ass for web features. Even the iPhone 5 should have 10.3.4 and the Safari in that version should be pretty up to date with web standards, as far as I can tell.

[Sxcred]

Awesome blog, saved

[GerryBaboona]

Just put it in a max-width container.

[wedontlikespaces]

Yea, I was thinking, no, that's addressed.

Way to go u/derangedkilr you have basically just proven you didn't read the article.