5 ms·
What worked for me is tailwind + making almost everything display:flex/grid.
by kebsup 4y ago
What worked for me is tailwind + making almost everything display:flex/grid.
- nailer 4y agoNot a fan of tailwind but grid by default is indeed a good basis for a design system and solves this easily.
- dimal 4y agoGrid isn't a good solution for this particular problem because the layout depends on the intrinsic size of the content. Grid is good for when you want the container to define the layout and have the content flow into it. Flex is good for when you want the layout to adapt to the content, like in this case.
- nailer 4y agoFlex is good when you need flexing. A single row grid, with variable width cells is simpler. See elsewhere in the thread where I solved this and / or submit a fork your own version using flex.
- dimal 4y agoHere's a fork. https://codepen.io/mrdanimal/pen/VwGNOQw?editors=0100 https://codepen.io/mrdanimal/pen/VwGNOQw?editors=0100 As far as I could tell there was no visual change. It's not drastically different, but once you make everything flex, it's possible to remove a few of the grid properties.