Grid and layout

[fuzenco]

Do you have suggestions on a bare-bones library for grid and flexbox layouts to use with Shoelace or do most people use straight CSS for this?

[claviska]

These days I use CSS grid, but if you like Flexbox I've found this useful in the past. http://flexboxgrid.com/

In my opinion, it really is worth learning CSS grid.

[fuzenco]

Excellent. Thank you and I agree. I’d bookmarked 2 articles previously. Sharing them here in case it helps someone else:

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

[ErikOnBike]

I really like CSS grid because it allows you to define your constraints from the containing element, but also have individual elements be able to override some.

BUT....it turns out that CSS grid can really become a performance issue. I used it quite heavily (my go to layout) and it became a real problem. So unfortunately, back to flexbox for me as the go to layout and only use grid for the specials.

See also: https://stackoverflow.com/questions/66858360/why-does-nested-displaygrid-kill-performance-but-flex-does-not

IF anyone knows how to solve the grid performance issue, please let me know! ;-)

[ErikOnBike]

That can be true for an 'empty' child, but did you try using children with multiple items and having an actual template (layout) defined? My performance issues were real. On Safari more visible than on Firefox and Chrome, but they were there on all browsers.

[claviska]

I used the sandbox linked on SO. If what you're saying is true, a minimal repro would be helpful so that we can file a bug and have browser vendors look into it. That's the fastest way to get something like this fixed.

[ErikOnBike]

Cory, I totally agree on this AND it is fairly complicated getting a repro on this from my environment. As I mentioned before (other thread) I work in a Smalltalk environment. This is a live coding environment based on a single image (containing the living objects from the previous run). No files I can export and run elsewhere (without the (or a) Smalltalk environment). Furthermore, I create all the WebComponents using my Smalltalk code. This means I do not have the Javascript code to create the WebComponents (simply isn't there). There is a VM running inside the browser which executes the Smalltalk bytecode. (Yes, this later part introduces some overhead and therefore impacts performance, but that does not explain why it works better with flexbox.)

If it helps to get a glimpse of what I am doing or if you're interested where Shoelace ended up in ;-). We could set up a video call and I can show you.

[claviska]

What I’m saying is, if this is fundamentally a problem with grid performance, we should get rid of everything else and prove that it’s a grid performance problem and open tickets so that vendors can investigate. (For example, take the resulting grid markup and bake it into plain HTML/CSS.)

Without that, we’re just speculating and there could be other layers interfering. 🤷🏻‍♂️

[ErikOnBike]

Up to now I have chosen to leave it as is. It works for me now. What you're suggesting would probably cost me quite a lot of time (of which I don't have much to spare). And it is unclear if I can show the performance issue in another setup. As you say layers might interfere. But removing some of these layers (like using WebComponents) is not an option for my solution/framework/way of working.
For clarity: I added a comment about my experience to this thread just as a precaution. If no one else is having performance issues, perfect!
Thx for thinking along.