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

231–240 of 277 posts

Re: Full-Bleed Layout Using CSS Grid

#231

Post by sleavey »

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…

Could you show some example CSS for your alternative suggestion by any chance? I'm not quite sure what you mean about using flexbox this way.

Re: Full-Bleed Layout Using CSS Grid

#233

Post by Atomskun »

Rusky wrote: post #37
Atomskun wrote: post #4

Wait 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.

Doesn't that just make it tricky to put stuff in the sidebars again? The article doesn't really talk about that but it is implied.

For a sidebar alone, you don't need CSS grid (probably obvious). The point of this article, i.e. having something full-bleed, is implemented by adding a specific class to the element. Which means you would always have a DOM similar to

    
    
    ...
    
    
    ...
My point is that now, with a new block element in the hierarchy, it would fill the maximum width anyway. It is only because of being inside a CSS grid that you now have to work around the grid positioning which means adding more CSS attributes.

The exception would be if you would want the full bleed element directly under the sidebar (in terms of z-index). Here CSS grid is useful, but this is probably a special case anyway.

Re: Full-Bleed Layout Using CSS Grid

#234

Post by DarkWiiPlayer »

artificial wrote: post #183
Dahoon wrote: post #159

Earlier quoted context omitted.

The new IE.

Wouldn’t that be Chrome? The ubiquity leads to lazy developers testing only on it. Maybe some fancy SVGs saying “Best viewed on Chrome!” To really rub it in :)

> SVGs saying “Best viewed on Chrome!”

HA! Chrome absolutely SUCKS at displaying SVGs. I rarely use them and I've already found two stupid bugs.

One super weird one (probably too much caching) where an animated element in a clone didn't inherit colours while its non-animated siblings do. This one is fixed now.

What isn't fixed yet is that `filter: hue-rotate(90deg)` applied to an SVG child element doesn't do anything (in firefox it does), is a pain in the ass because SVG filters, while more powerful, are much harder to set up.

Re: Full-Bleed Layout Using CSS Grid

#235

Post by tannhaeuser »

greggman3 wrote: post #191
artificial wrote: post #183

Earlier quoted context omitted.

Wouldn’t that be Chrome? The ubiquity leads to lazy developers testing only on it. Maybe some fancy SVGs saying “Best viewed on Chrome!” To really rub it in :)

No, the definition of "the new IE" is to not support the latest features. Pick some other phrase for "most popular"

Yeah "web standards" my ass - with WHATWG 100% just being Chrome devs, and W3C a pay-as-you-go wannabe "standardization body" financed by Google (and long out of the game of doing anything meaningful except CSS) so-called web standards are more of a monopolization and extortion instrument than anything else. Web heads seriously need to wake up rather than making it ever more complicated.

Re: Full-Bleed Layout Using CSS Grid

#236

Post by frankzander »

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…

Seems like you are the style police ;) According to the creators of the Grid you can use it for whatever you want however you want. So there is no right or wrong. The last yeas I often hear to voices saying "this is wrong do it so" or something until I realized, that a elegant way in CSS is mostly not adaptable from one html layout to another (across CMS ). So everyone has to find his own way to write clear code which is manageable. There is no gold path.

Re: Full-Bleed Layout Using CSS Grid

#237

Post by ryandrake »

remram wrote: post #115
ryandrake wrote: post #106

Earlier quoted context omitted.

> These days we have many websites with giant empty spaces on the left and/or right, all in the name of making the text lines short enough (much shorter than I like them, but that's another rant). The other rant is here: [1]. Curious why do you hope people don't use their browsers full-screen? How does someone else's browsing preference affect you? Am I a lesser person if I want to use my browser full-screen on a 512…

I'm not trying to tell you what to do. But if YOU make your browser wider than YOU can comfortably read, why do you expect ME the developer to do something with CSS to deal with it? That is the way your preferences affect me.

If I choose to fullscreen my browser window, I'm not expecting the developer to do anything about it. In fact, I'm hoping he will not choose to go out of his way to try to do something about it (e.g. deliberately adding whitespace). Honoring the user's preference often means less code/CSS.

Re: Full-Bleed Layout Using CSS Grid

#238

Post by rimliu »

SiVal wrote: post #185
russelg wrote: post #170

Earlier quoted context omitted.

Very disingenuous of you. IE was a trashfire because it refused to do anything in a standard way, meaning it had to be specially catered for. Safari is slow to follow the standards but at least its compliant. A engine that isn't Chrome is very essential for keeping the web open, especially since Firefox user share keeps going down.

slow to follow the standards Safari is not only slow to follow the standards, it is slow to advance the standards. I'd be more likely to believe the spin that Apple just wants to make sure things are done well on the web if it appeared that they were trying as hard to add good, new capabilities to the web platform as they are to add good, new capabilities to iOS. A engine that isn't Chrome is very essential for keepi…

How quickly people forget who brought canvas, CSS animations, etc.

Re: Full-Bleed Layout Using CSS Grid

#239

Post by rimliu »

highwind wrote: post #132
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 reminded me of days where we used to do layout.

Anyone who have usee tables for layout (I have) knows that it is nothing like that.
Post reply on HN