2 ms·
The one from PanGUI (https://pangui.io/blog/05-layout-rework-and-benchmarks/ https://pangui.io/blog/05-layout-rework-and-benchmarks/) looks impressive. It seems
by nicoburns 2mo ago
The one from PanGUI (https://pangui.io/blog/05-layout-rework-and-benchmarks/ https://pangui.io/blog/05-layout-rework-and-benchmarks/) looks impressive. It seems to combine a lot of the power/flexibility from CSS with the performance of simpler systems. It's not open source though, so it's hard to evaluate properly.
One thing I would love to see is CSS gain new unit which represents "a proportion of free space" (after fixed-size things have been sized) similar to fr units from CSS Grid but usable for properties like width/height and that would disable the "automatic minimum/content based size" that causes so many of the performance pitfalls with CSS layout.
I think this could make CSS layout both faster and more intuitive for 90% of layouts. And you could retain the existing properties for advanced layouts and backwards compatibility.
Flutter's blog post "constraints go down, sizes go up" [0] is the classic that I would recommend to anyone trying to understand UI layout. It doesn't cover every possible approach, but it applies to most of them including CSS. If you combine with a rule of thumb for keeping layout fast: "content-based sizing XOR flexible sizing" then you're well on your way to making a good layout system.
[0]: https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2 https://medium.com/flutter-community/flutter-the-advanced-la...