Re:Flexible data tables with CSS Grid
by chrismorgan on Saturday May 18, 2019 @01:03PM
(#19948447)
It depends on how thoroughly the widths and heights are known. In various constrained cases, what you suggest can work, but it’s always fragile and depends on certain layout constraints being met. I do like your use of the column direction and vertical wrapping; for some reason, I had always had in mind rows, which prevents you from doing things like vertical centring of the columns relative to one another. So I never did try that combination. I think it would narrowly meet our requirements now (which includes other landing pages with somewhat different hero content), but I don’t think it would have the first iteration of the design when I started using Grid, due to greater flexibility and variation of the heights of elements.
At the least, the Grid solution is more robust. But I will downgrade my “exceedingly painful” judgement to “somewhat icky and fairly fragile”.
Thanks for also supporting my point that most cases where Grid is used can be done with Flexbox!
Wouldn't just flex ordering and wrapping do? like this: https://codepen.io/anon/pen/QRgoOR