Full-Bleed Layout Using CSS Grid • Hacker News Board

Re: Full-Bleed Layout Using CSS Grid

#151

Post by bhl » Mon, Oct 05, 2020, 10:20 PM UTC

awake wrote: post #47

I like this idea, but how do you deal with pseudo bleed elements overlapping with sidebar content? For example many websites put navigation elements on the sidebar [1], or margin notes [2], [3]. I personally would love to see a css only solution for pseudo bleed with margin notes. The only solutions I've found so far use resize observer to absolutely position the margin notes using js or have hand coded positions and…

A compromise might be to hide navigation elements or margin notes until you hover / click on an element, sort of like how Wikipedia enables page previews on internal links.

Re: Full-Bleed Layout Using CSS Grid

#152

Post by mfincham » Mon, Oct 05, 2020, 10:20 PM UTC

aembleton wrote: post #148

mfincham wrote: post #131

If a site like Wikipedia is too wide, wouldn't you just make your browser window thinner? Mine has never been wider than half the display since I got a widescreen LCD ~ 15 years ago.

What do you display on the rest of your screen? Doesn't it distract you from what you are reading in your browser?

Just whatever other software I'm using. Usually terminal windows, sometimes text or graphics editor, e-mail client. That kind of thing.

Re: Full-Bleed Layout Using CSS Grid

#153

Post by benfrain » Mon, Oct 05, 2020, 10:21 PM UTC

Is this any different to Ethan Marcotte’s technique written from back in April?

https://ethanmarcotte.com/wrote/css-grid-without-max-width/

Used that one myself here: https://rwd.education

Re: Full-Bleed Layout Using CSS Grid

#154

Post by exogen » Mon, Oct 05, 2020, 10:28 PM UTC

preommr wrote: post #129

I hate that people use CSS Grid like this. For some reason, I see so many people reach for CSS Grid like it's the de facto solution for responsive design. This is a bad design because you're tying the child elements to the grid layout of the parent. If you added an extra column in the grid, you'd have to go and adjust it for the full bleed elements. IMO a better solution would've been to just use a column layout with…

This alternative falls apart as soon as you want to put a border or box-shadow around the content column while still having full-bleed elements.

Now you're limited to having it individually around each group of elements before/after any full-bleed content, instead of the entire set of content.

Re: Full-Bleed Layout Using CSS Grid

#155

Post by laksdjfkasljdf » Mon, Oct 05, 2020, 10:43 PM UTC

lol. that problem is solved decades ago. the problem have always, since the table layouts, been a decent VERTICAL bleed on top of this.

Re: Full-Bleed Layout Using CSS Grid

#156

Post by neogodless » Mon, Oct 05, 2020, 10:44 PM UTC

aembleton wrote: post #141

neogodless wrote: post #136

Is it just me and/or Desktop Firefox? The first example shows fixed navigation/ads and flexible content, but then the article goes on to demonstrate fixed content with flexible side bars. Which of these options does the author consider the real Holy Grail?

Which of these options does the author consider the real Holy Grail? > Once flexbox achieved mainstream browser support, this layout went from "holy grail" to "fountain drink"; it was everywhere, because it offered a great user experience, and was within reach for all developers. > As the web has evolved, I've discovered a new aspirational layout.

Ah gotcha, missed that line!

Re: Full-Bleed Layout Using CSS Grid

#157

Post by Asraelite » Mon, Oct 05, 2020, 11:12 PM UTC

remram wrote: post #59

If your screen is too wide to read websites comfortably, why don't you resize your browser? What is the point of buying a bigger monitor if you're still going to full-screen your browser to the point you can't read anymore? Isn't the point of bigger monitors to show more things at once?

Another solution which I haven't seen anyone here mention yet is having multiple text columns, essentially splitting up your content into paragraphs that are laid out side-by-side, like you often see in newspapers and research papers.

This has its drawbacks and some people don't like it, but surely it's better than only using 20% of the width of a wide display.

I would like to see more websites at least include it as an option.

Re: Full-Bleed Layout Using CSS Grid

#158

Post by chrisweekly » Mon, Oct 05, 2020, 11:15 PM UTC

preommr wrote: post #129

I hate that people use CSS Grid like this. For some reason, I see so many people reach for CSS Grid like it's the de facto solution for responsive design. This is a bad design because you're tying the child elements to the grid layout of the parent. If you added an extra column in the grid, you'd have to go and adjust it for the full bleed elements. IMO a better solution would've been to just use a column layout with…

You're not alone! I strongly prefer flexbox too. Besides the points you mention, excessive use of grids leads to "designing to the grid" instead of letting the content and context dictate flow.

Tangent: I also remember doing ridiculous things with nested tables during the original browser wars (circa 2001?) and consider it a "first-world problem" to be choosing among standards-based styling mechanisms.

Re: Full-Bleed Layout Using CSS Grid

#159

Post by Dahoon » Mon, Oct 05, 2020, 11:40 PM UTC

ss3000 wrote: post #145

preommr wrote: post #129

I hate that people use CSS Grid like this. For some reason, I see so many people reach for CSS Grid like it's the de facto solution for responsive design. This is a bad design because you're tying the child elements to the grid layout of the parent. If you added an extra column in the grid, you'd have to go and adjust it for the full bleed elements. IMO a better solution would've been to just use a column layout with…

Widespread flex gap support will probably eliminate 95% of grid usage in my apps today: https://caniuse.com/flexbox-gap And what a surprise, it's just Safari holding us back again. =_=

The new IE.

Re: Full-Bleed Layout Using CSS Grid

#160

Post by npunt » Mon, Oct 05, 2020, 11:44 PM UTC

I implemented something like this on my website [1] and I'm not really sold on it and I'm considering changing back.

The two things that I've lost are collapsing margins between paragraphs/headers and the ability for any asides (like a floating image or a footnote) to vertically span multiple paragraphs.

For margins between paragraphs I replaced them with grid-gap, but always having the same grid-gap is not great; you want some content closer than others.

For asides, it means I have to write smaller footnotes that vertically match the height of paragraphs - exactly the kind of lack of content/style separation I want to avoid.

This guy's site is fantastic and the article is well written tho, and it probably works for some people.

[1] example article that uses full-bleed sections: https://nickpunt.com/blog/category-defining-products/