Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Full-Bleed Layout Using CSS Grid

joshwcomeau.com

Post reply on HN
Print view View original

141–150 of 277 posts

Re: Full-Bleed Layout Using CSS Grid

#141

Post by aembleton »

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.

Re: Full-Bleed Layout Using CSS Grid

#142

Post by aembleton »

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?

Because I have many tabs open that I am switching between. Some of them work better in full screen and others need less space.

Re: Full-Bleed Layout Using CSS Grid

#143

Post by tekkk »

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…

It's surprising how rarely I even consider using CSS grid and every time I do, I still figure out a way to do it with flexbox. Now this depends of course on what you are doing, but for simple things, and you should keep things simple more often than complicated, flexbox is still as valid as it was before.

Maybe my layouts aren't as fancy as those who know how to neatly proportion their boxes with CSS grid using golden ratios, but I'm quite satisfied that they work and are easy to understand for anyone who knows a thing or two about flexboxes. Sometimes I might have to add an unnecessary wrapper, I admit that. But oh well.

Re: Full-Bleed Layout Using CSS Grid

#144

Post by aembleton »

diroussel wrote: post #110

The article starts out with the problem of wikipedia pages. Does anyone have a solution to wikipedia pages? I tried to adapt the articles approach to wikipedia. Create an account on wikipedia, or login. Then go to https://en.wikipedia.org/wiki/Special:Preferences#mw-prefsec... I chose MinervaNeue with Custom CSS. Here is what I set the CSS to: main { display: grid; grid-template-columns: 1fr min(65ch, 100%) 1fr; } ma…

I like using Wikiwand. For example: https://www.wikiwand.com/en/Hacker_News

Re: Full-Bleed Layout Using CSS Grid

#145

Post by ss3000 »

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. =_=

Re: Full-Bleed Layout Using CSS Grid

#146

Post by aembleton »

svnpenn wrote: post #31

this guy has some voodoo going on this site. I see the page, then the whole screen turns white. Even in safe mode. Edit: he is using ResizeObserver: https://developer.mozilla.org/Web/API/ResizeObserver which hasnt made it past draft JavaScript specification.

Interesting. I don't see the screen turning white on Firefox 81

Re: Full-Bleed Layout Using CSS Grid

#148

Post by aembleton »

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?

Re: Full-Bleed Layout Using CSS Grid

#149

Post by aembleton »

sergeykish wrote: post #108
bigbubba wrote: post #58

The translucent gradient overlay this site has is truly obnoxious. What possesses people to do things like this? Headers that follow you when you scroll down the page are bad enough, but this is truly abominable. Don't fade out text I'm trying to read dammit! Delete StandardLayout__GradientWrapper, it served no useful purpose, it only pisses people off.

I've thought blocking sticky header would remove it but no — flying gradient. Besides how to support names like StandardLayout__GradientWrapper-sc-1x2euwc-2 doIIpB in annoyance list? They would change in a moment.

Easier to just use Reader View

Re: Full-Bleed Layout Using CSS Grid

#150

Post by svnpenn »

aembleton wrote: post #146
svnpenn wrote: post #31

this guy has some voodoo going on this site. I see the page, then the whole screen turns white. Even in safe mode. Edit: he is using ResizeObserver: https://developer.mozilla.org/Web/API/ResizeObserver which hasnt made it past draft JavaScript specification.

Interesting. I don't see the screen turning white on Firefox 81

Its been implemented since Firefox 69 (I am using older version). But regardless, its part of a draft spec, shouldnt be used on a public website IMO.
Post reply on HN