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

41–50 of 277 posts

Re: Full-Bleed Layout Using CSS Grid

#41

Post by ryandrake »

> Have you ever tried to read Wikipedia on a very large screen? It looks like this: [image] Those paragraphs are so wide! Wikipedia doesn't constrain the container width at all. This leads to lines that are hundreds of characters in length.

NOOOOO! Please, please, please, please stop second-guessing my choice of browser window width! I bought a nice 27" monitor, and maybe I just want to use the whole thing. Why is your opinion about the amount of space I should be able to use for text more important than mine? I honestly don't care what your research says about optimal character lengths. I deliberately stretched my browser window to be this wide. Please don't override me.

Re: Full-Bleed Layout Using CSS Grid

#42

Post by uallo »

JoshTriplett wrote: post #23
uallo wrote: post #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 {} or soon .wrapper :is(h1,p) {} Alternatively, you can also use .wrapper > :not(.full-bleed) {} And in SCSS (or similar) you can write .wrapper { h1,p {} } (edit: Earlier versions of this comment mentioned :has instead of :is)

:has is not supported in any browser, and that seems unlikely to change, for performance reasons. https://caniuse.com/css-has

Sorry, I meant :is (which is already supported in some browsers).

Re: Full-Bleed Layout Using CSS Grid

#43

Post by onion2k »

pier25 wrote: post #40

Why even use grid when you can solve this much easier without it?

Grid enables you to do this (and a lot more) in a way that works across all modern browsers without much code in a robust and consistent manner. If you still need to support IE or older Android it's useful to understand other approaches but if you want to deploy something today that works grid is an excellent approach.

I've been building front end stuff for about 25 years and grid is much more straightforward than any approach that's come before it. Tables were a hassle to change, floats were fragile across browsers, flex was (and still is) good, but grid is a step up from all of those.

Re: Full-Bleed Layout Using CSS Grid

#44

Post by commandlinefan »

akersten wrote: post #29
baxtr wrote: post #13

It’s beyond me why CSS has to be so hard to understand. I have made several attempts and got it right, but it feels like I have to start at zero every time. I believe, it’s because CSS is not a programming language, but we are trying to do programming with it. Like: if screen is mobile then render divs stacked. I don’t know

I think CSS is "difficult to understand" because most people who do front-end don't want to spend a day learning it. Ask some people who make the claim it's difficult: what is the box model, and what is selector specificity. I can almost guarantee they won't be able to answer those questions, because they haven't bothered to actually try to learn CSS. Their knowledge of CSS is built from a set of "how do I do X in CS…

> most people who do front-end don't want to spend a day learning it.

Can you link to some good resources? I've read "CSS The Definitive Guide" by Eric Meyer, "Eric Meyer on CSS" (also by Eric Meyer) and "CSS Zen Garden" and I still can't get CSS to do anything useful and always resort to table-based layouts because they work.

Re: Full-Bleed Layout Using CSS Grid

#45

Post by hombre_fatal »

throw_m239339 wrote: post #30

I really hated this era before flexbox and co. CSS used to be the least intuitive thing on the planet yet a lot of people claimed otherwise. We had to resort to silly tricks (remember overflow hidden?) in order to make up for the mess that CSS used to be. Again what really pissed me off isn't CSS inherent issues but the fact that many people claimed there was absolutely nothing wrong with it, a pattern I often see wi…

Seems like a bit of a strawman, people who couldn't think of a single issue with CSS. You are generally talking to beginners when you encounter anyone like that on any subject. Kind of like trying to draw too many conclusions from a Twitter argument you had with someone who is actually a 14yo (probably happens a lot more than we like to think).

Instead I think I could agree with people who could point out that it's all trade-offs, and there are some upsides to having fewer autolayout options in UI programming. For example, flexbox and cssgrids enables things you simply wouldn't have attempted before in CSS (you'd have gone with something less expressive, like media-query hard-coding). And any time you nest grids and/or flexboxes you get to rediscover the horrors of autolayout flexibility.

UI is hard and there is no "best". Though it's the emergence of mobile devices that forced the hand to more complex autolayout tools.

Re: Full-Bleed Layout Using CSS Grid

#46

Post by bobthepanda »

wilsonrocks wrote: post #32
giantrobot wrote: post #21

Earlier quoted context omitted.

The differences in how different engines/platforms behave definitely does not help when doing any non-trivial layout.

I think a _lot_ of this is standardised now in the vast majority of browsers people use.

Depending on what space you work in and what consumers you have “majority” is not acceptable.

Safari and IE are the big bugbears in my experience.

Re: Full-Bleed Layout Using CSS Grid

#47

Post by awake »

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

[1]: https://meyerweb.com/eric/thoughts/2020/07/01/accordion-rows...

[2]: https://www.gwern.net/About

[3]: https://www.inkandswitch.com/local-first.html

Re: Full-Bleed Layout Using CSS Grid

#48

Post by chrismorgan »

dmlittle wrote: post #8
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.

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?

Here’s an example on my site: https://chrismorgan.info/blog/rust-fizzbuzz/

That’s left-aligned (margin-left: 0; margin-right: 0) rather than centre-aligned (margin-left: auto; margin-right: auto), but it gets the point across. Headings, paragraphs, list items, &c. all get their widths constrained (deliberately to different points, in my case, which wouldn’t work if you were going centre-aligned), but figures can be full-bleed simply by not having that max-width (though in my case they still need negative side margins, but of known values).

Re: Full-Bleed Layout Using CSS Grid

#49

Post by hombre_fatal »

akersten wrote: post #29
baxtr wrote: post #13

It’s beyond me why CSS has to be so hard to understand. I have made several attempts and got it right, but it feels like I have to start at zero every time. I believe, it’s because CSS is not a programming language, but we are trying to do programming with it. Like: if screen is mobile then render divs stacked. I don’t know

I think CSS is "difficult to understand" because most people who do front-end don't want to spend a day learning it. Ask some people who make the claim it's difficult: what is the box model, and what is selector specificity. I can almost guarantee they won't be able to answer those questions, because they haven't bothered to actually try to learn CSS. Their knowledge of CSS is built from a set of "how do I do X in CS…

> I think CSS is "difficult to understand" because most people who do front-end don't want to spend a day learning it.

Yeah, "html/css" is the object of our derision on HN as some sort of thing that's beneath us. As if someone who is an "html/css" designer isn't a real developer. Yet at the same time we complain that we have to learn it. That after pretending it was trivial all this time, we're annoyed that we can't just fake our way through it when the going gets tough.

But the other reason it's hard is that UI and clientdev is hard. There's this weird meme that UI is just bells and whistles and stakeholder pleasers instead of a human interface that demands a lot of forethought and expertise, and something that has to be functional and possibly even a joy for the user to use. You can see this when people here brag about being backend developers that never touch the client as if that's something to brag about.

Re: Full-Bleed Layout Using CSS Grid

#50

Post by bigbubba »

throw_m239339 wrote: post #30

I really hated this era before flexbox and co. CSS used to be the least intuitive thing on the planet yet a lot of people claimed otherwise. We had to resort to silly tricks (remember overflow hidden?) in order to make up for the mess that CSS used to be. Again what really pissed me off isn't CSS inherent issues but the fact that many people claimed there was absolutely nothing wrong with it, a pattern I often see wi…

I've noticed that some people mistake 'the best extant X' with 'X has no problems.' For instance, 'Y is a problem with X' will often receive the response 'Nuh-uh, because extant Z also has problem Y but is worse than X in other respects.' Look for this particularly in conversations about smartphones.

> > iphones have poor battery life, I'd like a phone that keeps a charge for a full week at least.

> No you're wrong because android phones also have bad battery life.

Post reply on HN