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

121–130 of 277 posts

Re: Full-Bleed Layout Using CSS Grid

#121

Post by krsdcbl »

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 suspect you might be mixing up people who talked about the spec and actual end users - at least can't seem to recall anyone ever saying css is good as it is, back in the days. The shortcomings where well known and anmoying to anyone having to work with them. But that might be true to my bubble only.

Re: Full-Bleed Layout Using CSS Grid

#122

Post by krsdcbl »

joshwcomeau wrote: post #107
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)

Hi there! Author here. What I meant is that there is no way to tell certain children to disregard the constraints of a container; if a parent is 800px wide, there isn't a way to say "keep this child in-flow, but fill the viewport". The alternative you propose is problematic for a couple reasons: - I don't like "reaching in" to child elements. Especially in a component-focused architecture, it's a quick way to make a…

I do see how op misread your intention, but would like to add that you did a very good job on addressing all these shortcomings and provide a neat solution with this tutorial - very good work!

Re: Full-Bleed Layout Using CSS Grid

#123

Post by krsdcbl »

enkrs wrote: post #6

Great article. While CSS grid is very powerful, maybe I'm not seeing the full picture in the examples: aren't the examples possible with just p { margin: 0 auto; max-width: 65ch } ? What does grid bring here?

only theoretically, for the p element itself.

ch is a fontsize relative unit and this solution wouldn't provide the same results for any element that has another text sizing and is not wrapped within a p tag.

and if you apply these rules to the whole content wrapper, you loose the ability to have some children selectively fill the viewport.

Re: Full-Bleed Layout Using CSS Grid

#124

Post by krsdcbl »

vbernat wrote: post #77
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,…

You would get a ragged left margin if you have elements less than 65ch wide.

you actually wouldn't, as these smaller elements still get centered by the auto margin

Re: Full-Bleed Layout Using CSS Grid

#125

Post by nimih »

dylan604 wrote: post #9

Did anyone else get weird screen flickering[0] from the animated stars used in a few places on this site? The dev-tools show the stars are elements being added/removed dynamically. The animation is cutesy, but the flickering is annoying. FF 80.0.1 MacOS 10.14 (yeah it's old) [0] https://vimeo.com/465078029

I got the same flickering in FF 81, OS X 10.15. It only happened when the stars were on-screen.

Re: Full-Bleed Layout Using CSS Grid

#126

Post by indentit »

reidjs wrote: post #109

If there's any chance the content on your page will need to be printable or turned into a PDF, do not use CSS Grid. It will get obliterated no matter which browser you use. I made a mobile responsive resume using CSS Grid which I eventually had to completely redo the styling because Grid broke everything.

This is good advice. I recently tried to rewrite my resume in HTML and CSS because I was annoyed with LibreOffice's (though Word would be no different) table handling/UX - wherein my table ended right before the bottom page margin so I ended up with an unnecessary trailing blank page.

After switching to CSS grids, I had problems with alternating row background colors (I achieved it, but relied on knowing the contents when what I really wanted was a generic solution). Apart from that (and me wanting to group some elements together to make the markup a bit more semantic and `display: contents` having some weird interactions), it was quite a breeze. But, then I tried to print it to PDF, and discovered that browsers won't split a grid row over two pages even if I tell it to, so ended up with more whitespace in other places... Am now trying to decide whether to just use table markup as one cannot specify colspans etc in CSS with `display: table-cell`...

Re: Full-Bleed Layout Using CSS Grid

#127

Post by bobthepanda »

aarpmcgee wrote: post #66
akersten wrote: post #29

Earlier quoted context omitted.

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

it also doesn't help that sometimes you have to whack-a-mole different browser implementations of the spec, and particularly if you're working on a bit of a website somebody else owns you have to be very careful about specificity, what styles other teams may be using, etc.

Re: Full-Bleed Layout Using CSS Grid

#128

Post by bobthepanda »

akersten wrote: post #73
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.

I don't know if there is a single perfect resource out there, but the thing that helped me the most was understanding CSS as a shift from programming with an imperative mindset to a declarative mindset. Treat CSS as a medium for expressing 'what you want' instead of 'what to do.' My guiding principle is that "less is more" and if you find yourself writing a ton of super-specific and messy CSS, it's one of two scenari…

css tricks has nice flexbox and grid guides that also have helpful pictures to show what the end result of CSS is:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://css-tricks.com/snippets/css/complete-guide-grid/

Re: Full-Bleed Layout Using CSS Grid

#129

Post by preommr »

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 flex box, where the children are containers at standard sizes (e.g. full-bleed, 80-characters, etc.).

Yes it adds like another tag or two, but it's semantically more sound. And from that extra markup we get a lot more flexibility, e.g. going from column layout to a slide show or something if someone wanted.

CSS Grids are good for grids i.e. layouts where you want control over flow in both axes. This is not a grid. You have one column of data where you are controlling whitespace.

This has become a real pet peeve of mine because it seems like so many people love css grid when it's actual use case is fairly rare.

Edit: I also want to add that this creates an uglier layout if you have variable width children. Because you'd essentially create a full-bleed container element just to add a non-full bleed child to it.

And I am sorry that this came across as kind of aggressive, this is something that's really been irking me with recent web dev trends. And I feel like a crazy person confused over why the world suddenly decided on Css Grid all day every day.

Re: Full-Bleed Layout Using CSS Grid

#130

Post by grumple »

onion2k wrote: post #43
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…

Just as an FYI, I've run into browser compatibility issues when using grid. It's been a while since I worked on that project, so hopefully mobile / edge / safari / chrome / firefox are all on the same page now, but it wasn't great a year or two ago. Go here [1] and keep hitting more, there are unfortunately lots of things not working in Safari and partly in Firefox.

1. https://caniuse.com/?search=grid

Post reply on HN