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

261–270 of 277 posts

Re: Full-Bleed Layout Using CSS Grid

#261

Post by knathan »

joshwcomeau wrote: post #255
Aeolun wrote: post #251

Earlier quoted context omitted.

You can use the same trick in a flexbox container? Set every * to max-width: 65ch and then have the same full-bleed class to go to width: 100%. I agree with OP that using grid for this is a bit misplaced. But realistically, it probably won’t be a problem.

This doesn't work because `65ch` means very different things depending on the font-size. You need to apply it to a parent class, so that it picks the base font size (I'm not actually sure how this works but in practice it seems to base it on the child tag). I also don't like the idea of "reaching in" and setting widths on all children. Feels like this could cause problems, especially on replaced elements like images/…

There really aren't any scenarios I can think of that an element would need to have `grid-column` set without being wrapped in another grid, so for that reason it is generally safer to set `grid-column` on all children than it is to set `max-width`. I would be surprised if I added an element only to discover that its width was being modified by a wildcard rule, less so with `grid-column` because grid placement is arguably the concern of the grid.

As a side note, I like this technique and have already had a good opportunity to apply it instead of the old padding & negative margins method or even flexbox + stretch (and I like flexbox), neither of which actually worked for this very specific case.

Re: Full-Bleed Layout Using CSS Grid

#262

Post by ygra »

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

Sometimes it'd be great to have full XPath available for CSS selectors. But I can see how that's a performance nightmare.

Re: Full-Bleed Layout Using CSS Grid

#263

Post by FZY0E1RnLM »

uryga wrote: post #162
akersten wrote: post #16

Earlier quoted context omitted.

Still not sure I get it. CSS makes it very easy to carve-out elements because of selector specificity. .content * { max-width: 65ch; margin: 0 auto; } .content img { max-width: 100%; width: 100%; } It's a neat demo of CSS Grid, for sure, but the above would be my much preferred way of doing this kind of layout. Maybe if there were a need for elements (quotes, callouts, etc.) in the side columns alongside the content,…

i think your version will break a bunch of common uses of `margin-{left,right}`; e.g. indenting like blockquote { margin-left: 15px; /* ... */ } won't work properly (it'll go all the way to the left). i haven't checked, but i think that in the grid version, you'd get an indent as expected. and i think that's the grid version's main advantage – it doesn't "use up" `margin` and `max-width`, so you're free to use them t…

This might be solved by putting the margin on .content and using negative space for full-bleed elements, as in:

  .content { width: 65ch; margin: 0 auto }
  .content .full-bleed {
    width: 100vw;
    margin-left: calc((65ch - 100vw) / 2);
  }

Re: Full-Bleed Layout Using CSS Grid

#264

Post by commandlinefan »

daveilers wrote: post #72
commandlinefan wrote: post #44

Earlier quoted context omitted.

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

Which editions did you read? Many of the css options that make complex layouts more palatable have only been commonly supported more recently. (flex-box:2015 , grid:2017, newer units:2010)

I don't remember the specific editions, but it was a long time ago - long before flex-box and grid were around. Still, back then, people could work magic with CSS using floats and positioning and such, and I couldn't make any sense of it. Maybe it's time to pick up a more up-to-date book on CSS and try again with the modern timesavers.

Re: Full-Bleed Layout Using CSS Grid

#265

Post by fanf2 »

animationwill wrote: post #81
shaftway wrote: post #24

Earlier quoted context omitted.

I think it's because of the combinatorics of it and it's compounded by the specificity system, the size of the vocabulary, and no built-in compiler. The combinatorics are tough for our lizard brains to reason out. If you don't have a strict set of rules for your CSS then you end up with a mixture of element rules, class rules, and id rules, and the combinations of these can get hard to hold in your head. Having compo…

> By comparison there are 53 reserved words in Java and only 33 in Javascript. Where did you find these numbers? I'm trying to find them but I can only find the Ecmascript and the number appears way higher

39 listed here https://tc39.es/ecma262/2020/#sec-keywords-and-reserved-word...

51 listed here https://docs.oracle.com/javase/specs/jls/se15/html/jls-3.htm... with a bunch of non keywords listed below, of which true false and null are also reserved

Re: Full-Bleed Layout Using CSS Grid

#266

Post by artificial »

DarkWiiPlayer wrote: post #234
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 :)

> 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…

Going to codepen this later and see what’s up. I haven’t used them beyond toy setups since it’s usually a hassle, I always get inspired by the Stripe site.

Re: Full-Bleed Layout Using CSS Grid

#267

Post by shaftway »

animationwill wrote: post #81
shaftway wrote: post #24

Earlier quoted context omitted.

I think it's because of the combinatorics of it and it's compounded by the specificity system, the size of the vocabulary, and no built-in compiler. The combinatorics are tough for our lizard brains to reason out. If you don't have a strict set of rules for your CSS then you end up with a mixture of element rules, class rules, and id rules, and the combinations of these can get hard to hold in your head. Having compo…

> By comparison there are 53 reserved words in Java and only 33 in Javascript. Where did you find these numbers? I'm trying to find them but I can only find the Ecmascript and the number appears way higher

For Java I used https://www.thoughtco.com/reserved-words-in-java-2034200 but Wikipedia lists 51. I'm too lazy to actually diff it.

For Javascript I used https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... and fudged the numbers a bit. There are future reserved words, but I didn't iinclude them because there's no point in memorizing them. Now that I look in detail that list also doesn't include "true", "false", and "null".

Re: Full-Bleed Layout Using CSS Grid

#268

Post by akersten »

wruza wrote: post #246
akersten wrote: post #214

Earlier quoted context omitted.

CSS is a top-down language, not a constraint language. It is not surprising that you cannot construct things in the same way as you would in a constraint-based layout system. I am sure I could discover an equal "simple" example that is easy in CSS but difficult/impossible in GTK. That you cannot use a hammer in the same way as a crowbar, even though they are both blunt instruments, is not a condemnation of the hammer…

You just switched from blaming me for not knowing css to blaming me for not using the right tool, as if I had a clear way to do that. It is nothing new and was propheted in bla-blah paragraph. But if you ever tried to size-match in JS, you know that it is not a trivial task. First, an element must be temporarily placed into document.body for all styles to apply correctly. Second, it must repeat all of the hierarchy i…

> It is nothing new and was propheted in bla-blah paragraph.

I don't think we can have a reasoned discussion about this if you're going to write off any contention as "bla-blah," so I'm disengaging.

Re: Full-Bleed Layout Using CSS Grid

#269

Post by wruza »

akersten wrote: post #268
wruza wrote: post #246

Earlier quoted context omitted.

You just switched from blaming me for not knowing css to blaming me for not using the right tool, as if I had a clear way to do that. It is nothing new and was propheted in bla-blah paragraph. But if you ever tried to size-match in JS, you know that it is not a trivial task. First, an element must be temporarily placed into document.body for all styles to apply correctly. Second, it must repeat all of the hierarchy i…

> It is nothing new and was propheted in bla-blah paragraph. I don't think we can have a reasoned discussion about this if you're going to write off any contention as "bla-blah," so I'm disengaging.

It was my bla-blah, so please read it as etc-etc, and if you feel offended by that and by my tone, I apologize. But it would be fair if you also excused my huge disappointment after following these exact ideas, spending days and finding out that they do not work or are completely non-viable in vivo. If any css loving guy implemented the puzzle above (and a half of other common issues) as a library that could be simply added to a job-grade project, they are welcome to share it (or sell, such an easy $$$). I've been in these discussions and done what was suggested, that's why I listed all these reasons word by word, before anyone had a chance to repeat them, and that's where my criticism comes from. I just cannot sit here and silently watch how they praise a thing that is not remotely as good as is claimed. How many man-centuries have to be spent until we all admit the undeniable?

Re: Full-Bleed Layout Using CSS Grid

#270

Post by uryga »

FZY0E1RnLM wrote: post #263
uryga wrote: post #162

Earlier quoted context omitted.

i think your version will break a bunch of common uses of `margin-{left,right}`; e.g. indenting like blockquote { margin-left: 15px; /* ... */ } won't work properly (it'll go all the way to the left). i haven't checked, but i think that in the grid version, you'd get an indent as expected. and i think that's the grid version's main advantage – it doesn't "use up" `margin` and `max-width`, so you're free to use them t…

This might be solved by putting the margin on .content and using negative space for full-bleed elements, as in: .content { width: 65ch; margin: 0 auto } .content .full-bleed { width: 100vw; margin-left: calc((65ch - 100vw) / 2); }

yeah, that's the most common way of doing it afaik
Post reply on HN