There are myriad “how to flexbox” but never seen good “how to grid” in my experience - I despise grid and have never intuitively gotten the hang of it and 95% of the time flexbox will work better and is easier anyway
Just my $.02
Just my $.02
actually, that was the point of my comment a few parent generations up from linked: by hanging the train under the rail, you get perfect banking for basically free. Fair, entry and exit of turns has to be handled smoothly, but you get passive pendulum-based perfect bank angle at any speed from 0 to the maximum allowed for that radius. And while it's certainly not cheap to be forced to build the track as "technically a bridge", the lack of serious span makes the cost not actually that bad relative to train track in locations where the curve radius and speeds tend to actually be used (valleys narrow enough to need quite tight radii, as well as near existing infrastructure: if you're already bridging, it's easy to design the pillar point foundations to not conflict with existing usage).
Oh, and about the coffee you mentioned: just like bus and subway, (open) drinks and food are not allowed anyways. In any case, the only substantial forces would be increased gravity, and whatever traction limited acceleration along the direction of travel (this would be with deliberate jerk minimization, though, as people would otherwise loose their footing, where the currently active limits for subways come from).
Whereas the "ASCII diagrams" of grid-template-areas, especially, I think is one of the most intuitive things in recent CSS. The majority of Grid CSS styles are generally centralized to your top-most containers outside `grid-area: some-area-name;` container classes (which may also have an align or justify) and the rare `display: contents;` (if you count that as Grid CSS) or `display: subgrid;`. Responsive layouts in CSS Grid is just changing the templates in your central containers based on your breakpoints.
I've gotten about to the point that even for 1D layouts I'm about to "forbid" junior developers from using flexbox to avoid its seemingly inevitable decline (in so many large apps I've seen) to inline-style soup via (usually ad hoc) Tailwind-like DSLs, because CSS Grid is easy enough and clean enough to use everywhere.
wtf is an fr anyways? is a question I've never been able to retain the answer. there are many times where i've attempted to use grid layout, and then ultimately just switched back to neanderthal mode and used a table.
If you want the second column to stretch, then the `fr` part is assigned to the second column. Mixing `fr` and `auto` doesn't really make sense. You can do it like this. https://codepen.io/tomtheisen/pen/emOeqPy
grid-template-columns: 10em 1fr;I also have issue of letting go and fully accepting the way of the flex. Instead of feeling comfortable just throwing elements inside the grid element, by brain needs each row to have a wrapper element like a tr and nested td instead of just tossing td elements in tbody (sticking to the table mentality). It took a minute for me to get that to click in my head for whatever reason
Now that you've explained the rest of your requirements, I can see that `fr` is not suitable for the purpose. In the meantime you've gotten a better answer for the updated requirements, in particular min-content and max-content.
First:
> I want a simple 2 column row with the first field being narrow and the second field stretching to fill the width
Second:
> i want the first column to be just wide enough, and the second column to fill the space.