[dieselgate]

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

[frob]

I've gone back to https://cssgridgarden.com/ multiple times. It's https://flexboxfroggy.com/ but for grids.

[bobthepanda]

I use https://css-tricks.com/snippets/css/complete-guide-grid/ as a reference since it has pictures.

[namibj]

Sorry for wrong thread; 38c3 kept me too busy to catch the reply window for https://news.ycombinator.com/item?id=42490859 :

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).

[WorldMaker]

I've reached the other opinion. I learned flexbox better than most, but it never felt "intuitive" and it was hard to reason about complex flexbox layouts, especially responsive ones with multiple variations. Flexbox in general seems so hard to reason about that there are a million "helper" libraries for it, each with their own mini-DSLs on top of the flexbox DSL. Every junior developer's usage of flexbox starts to look like Tailwind, covered in these DSLs for DSLs, increasingly spread out across the elements of the DOM.

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.

[microflash]

I have found Grid by Example[1] by Rachel Andrew pretty useful to learn and use Grid.

[1]: https://gridbyexample.com

[JamesSwift]

Flex is for 1d layout, grid is for 2d layout. Anything by Jen Simmons is a great resource for learning grid.

[pjmlp]

Grid is originally based on WPF XAML grid system, as it was the former IE team that contributed the original design, and I still can't grasp it fully, even though I spent 4 years doing WPF development.

[dylan604]

1fr

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.

[mixmastamyk]

Fraction. As in 1/n.

[dylan604]

right, but if I want a simple 2 column row with the first field being narrow and the second field stretching to fill the width "1fr auto" doesn't work nor does "1fr 2fr"

[recursive]

> second field stretching

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;

[dylan604]

but i don't know if 10em is too much or too small. that's the point. i don't want a specific width defined

[robertoandred]

Try min-content, fit-content, or max-content instead of auto.

[recursive]

Then you can use 1fr 10fr or any ratio you want.

[sosborn]

https://www.digitalocean.com/community/tutorials/css-css-gri...