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

251–260 of 277 posts

Re: Full-Bleed Layout Using CSS Grid

#251

Post by Aeolun »

jstummbillig wrote: post #242
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 displays a very mediocre grasp on, at the very least, web semantics and CSS Grid. (Also, an emotional disposition against a simple piece of web technology. Wild.) > This is a bad design because you're tying the child elements to the grid layout of the parent Apart from that sentence carrying very little internal logic and abusing the word "because", there is a simple fix to what, I think, is your point: Name you…

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.

Re: Full-Bleed Layout Using CSS Grid

#252

Post by matthewmacleod »

ss3000 wrote: post #145
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. =_=

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

Re: Full-Bleed Layout Using CSS Grid

#253

Post by Aenyn »

robertoandred wrote: post #165
stjohnswarts wrote: post #78

Earlier quoted context omitted.

You sound a lot like me. I'll use CSS for colors/fonts/theming/separation and then do layout with tables :) . None of the stuff I work on is really all that complicated, so "tables are slow" just doesn't come up because the pages aren't large at all so 5ms vs 50ms doesn't matter.

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.

Re: Full-Bleed Layout Using CSS Grid

#254

Post by ron0c »

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…

I can tell you why I, a sys admin interested in dabbling in html/css for my own personal website, looked into CSS Grid.. Firefox Developer Start Page. Right there in the middle.

Re: Full-Bleed Layout Using CSS Grid

#255

Post by joshwcomeau »

Aeolun wrote: post #251
jstummbillig wrote: post #242

Earlier quoted context omitted.

This displays a very mediocre grasp on, at the very least, web semantics and CSS Grid. (Also, an emotional disposition against a simple piece of web technology. Wild.) > This is a bad design because you're tying the child elements to the grid layout of the parent Apart from that sentence carrying very little internal logic and abusing the word "because", there is a simple fix to what, I think, is your point: Name you…

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/videos. Not to mention that it just feels wrong when combined with a component architecture, where I might expect a component to control its own destiny. In fairness, my solution also reaches in to apply a grid-column, but grid-column is a property that only makes sense when combined with a parent's `display: grid`. So it bothers me less.

Enough people have brought this up that I wonder if I should have addressed it in the article... but then I realize, it's not my job to argue against or "disprove" all alternative ideas. I'm not claiming that my way is the best way, I'm just sharing a cool trick I found :)

Re: Full-Bleed Layout Using CSS Grid

#256

Post by detaro »

Aeolun wrote: post #251
jstummbillig wrote: post #242

Earlier quoted context omitted.

This displays a very mediocre grasp on, at the very least, web semantics and CSS Grid. (Also, an emotional disposition against a simple piece of web technology. Wild.) > This is a bad design because you're tying the child elements to the grid layout of the parent Apart from that sentence carrying very little internal logic and abusing the word "because", there is a simple fix to what, I think, is your point: Name you…

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?

Re: Full-Bleed Layout Using CSS Grid

#257

Post by progers7 »

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…

SVG filter support in Chromium is actively being worked on, primarily led by an incredible engineer at Opera (fs@opera.com). This work has been ongoing for almost a year and should complete in Q4. Please star https://crbug.com/109224 for updates (stars also help prioritization).

Re: Full-Bleed Layout Using CSS Grid

#258

Post by egberts1 »

This layout by CSS is awesome. It makes it possible to accomodate different screen dimensions (iPad, iPhone, landscaped iPhone, widedesktop).

So, if it’s a bad design, and still makes it a pleasant readability approach, then I’m all for it.

Re: Full-Bleed Layout Using CSS Grid

#259

Post by andrewingram »

jacurtis wrote: post #193
aarpmcgee wrote: post #66

Earlier quoted context omitted.

I've been writing CSS for about 10 years at nearly every professional job I've had. I don't get 'stuck' often and generally feel competent, but I am far from an expert or a master. I think CSS is difficult to understand because there are so many ways to accomplish a task, and so many of those ways lead to (sometimes) unforeseeable consequences, and nearly all of the APIs (possibly with the exception of css grid) don'…

Yeah I think working with CSS is like working with Databases. There are a lot of ways in databases to get the job done. At first glance it seems to work the way you want and even survives early testing or even deployment. It doesnt fall apart until much later when you are trying to build upon it, scale it, etc.. This causes many people to learn the wrong way to do something because they might not stick around until i…

The comparison with databases is an interesting one. I have observed in both that really diving into exploiting the domain in a language-native way (e.g. CSS or SQL) can lead to extremely powerful solutions, but ones which don't integrate very neatly into a broader system. So you usually find people inventing patterns, or restricting themselves to subset -- choosing to skip some of the power in favour of maintainability. You can build an entire system in just SQL and little-to-no other programming languages, but should you?

Re: Full-Bleed Layout Using CSS Grid

#260

Post by lucasgelfond »

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…

Where is the best place to learn CSS from a more foundational/complete perspective? I took freeCodeCamp's responsive web dev course but still find myself googling a lot of "how to do x in CSS"
Post reply on HN