Styling complex/dynamic element
I have an element that might or not have a checkbox above, and that might or not have a description that will go on two rows, what's the best approach in styling such a thing? I'm trying flex, but since the number of flex item is dynamic it doesn't work too well

9 Replies
If you want a rigid layout structure than flexbox is the wrong tool, use grid.
Solved with grid, but I had to set an empty span where the checkbox can be to always have the same number of elements
you can solve that with grid areas if you want, though having a placeholder element isn't the end of the world either
grid areas or explicitly placing elements based on grid lines
I had 10 minutes to solve the issue because it's going into production, I chose the quick way
Now that it's in production you can take your time to fix it and push the fix. Or just leave it :p
That's not the end of the world
you could use the
:has()
pseudo selector if you feel okay about its browser support. Using css custom properties will help couple otherwise -seemingly unrelated css values.

Looking at the design again, you could also set a min height and think of the "far-side" of flexbox.
Thank you for your answer, I'll try to implement this :)