Full-Bleed Layout Using CSS Grid • Hacker News Board

Re: Full-Bleed Layout Using CSS Grid

#271

Post by Aeolun » Wed, Oct 07, 2020, 10:33 AM UTC

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

> I'm not claiming that my way is the best way, I'm just sharing a cool trick I found :)

I agree. It’s not that I really think one way is better or worse.

I like flexbox more, but since you’re not working in my codebase, you can do whatever you want ;)

Re: Full-Bleed Layout Using CSS Grid

#272

Post by Aeolun » Wed, Oct 07, 2020, 10:34 AM UTC

detaro wrote: post #256

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.

Doesn't that run in the "ch depends on font and font-size" problem e.g. with headings vs paragraphs again if you don't use wrappers?

Hmm, that’s definitely possible, but then I think we probably shouln’t be using that magic unit to begin with.

Re: Full-Bleed Layout Using CSS Grid

#273

Post by detaro » Wed, Oct 07, 2020, 11:10 AM UTC

Aeolun wrote: post #272

detaro wrote: post #256

Earlier quoted context omitted.

Doesn't that run in the "ch depends on font and font-size" problem e.g. with headings vs paragraphs again if you don't use wrappers?

Hmm, that’s definitely possible, but then I think we probably shouln’t be using that magic unit to begin with.

Why? It specifically exists to make things dependent on the font, and sizing text columns based on the size of the body text, and have other elements follow that, also makes sense.

Re: Full-Bleed Layout Using CSS Grid

#274

Post by ss3000 » Wed, Oct 07, 2020, 7:37 PM UTC

matthewmacleod wrote: post #252

ss3000 wrote: post #145

Earlier quoted context omitted.

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

In fairness, this feature was only released in Chrome a couple of months ago, and has in the past week been merged into WebKit: https://trac.webkit.org/changeset/267829/webkit

Fair enough, I guess both Chrome and Safari were holding us back until a few months ago haha.

Really ecstatic to see that it's going to be in Safari soon though! Thank you so much for sharing! Really made my day.

This is why I love Hacker News.

Re: Full-Bleed Layout Using CSS Grid

#275

Post by remram » Wed, Oct 07, 2020, 9:10 PM UTC

ryandrake wrote: post #237

remram wrote: post #115

Earlier quoted context omitted.

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.

Oh I see. Then we are agreeing :)

Re: Full-Bleed Layout Using CSS Grid

#276

Post by Aeolun » Thu, Oct 08, 2020, 12:45 PM UTC

detaro wrote: post #273

Aeolun wrote: post #272

Earlier quoted context omitted.

Hmm, that’s definitely possible, but then I think we probably shouln’t be using that magic unit to begin with.

Why? It specifically exists to make things dependent on the font, and sizing text columns based on the size of the body text, and have other elements follow that, also makes sense.

Yes, but with it being dependent on the current font size, its a tad hard to use effectively.

You can make the container have a sensible weight to keep all elements within it, but you cannot have the children contain their own destiny in a consistent manner.

Re: Full-Bleed Layout Using CSS Grid

#277

Post by robertoandred » Wed, Oct 14, 2020, 10:27 PM UTC

Aenyn wrote: post #253

robertoandred wrote: post #165

Earlier quoted context omitted.

Using tables for things that aren't tables is terrible for accessibility.

Why is it so bad for accessibility? I don't know much about web design.

Browsers, and therefore things like screen readers, see table elements as collections of tabular data. Using these elements for layout or design will cause a confusing and useless interpretation for people using a screen reader or analogous tool.