Hacker News new | past | comments | ask | show | jobs | submit login

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 mess. My solution DOES reach in to apply a grid column, but that property only makes sense within the context of a grid, so it doesn't seem as problematic to me.

- the `ch` unit doesn't work properly when applied individually to different elements; an `h1` with 65ch width is going to be much wider than a `p` with 65ch width. You need the width to be applied to the parent, so that it remains consistent

- It's likely that you already have a constrained container, if you're adapting this solution to a page that already exists. If so, your approach isn't really workable without a major overhaul.

I'd also just add, the nice thing about using Grid is that it's super extensible. If you want to add a sidebar, it's quick and straightforward.

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!

Applications are open for YC Winter 2022

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact