The general rule is that grid is for 2d layout and flex is for 1d layout.
I almost always combine the two by way of a nested hierarchy of elements. Grid is used for the strategic layout, and then within each area I may have flex (or more grid) as appropriate.
As for a "literal table of data", I still use table elements for this exact purpose. I do not use tables for layout anymore, unless its for HTML email.
flex everything, it behaves much smoother
Grid everything, it has everything flex has and mixing the two makes one want to rage quit.
Re:Is There Too Much CSS Now?
by swagasaurus-rex on Monday November 07, 2022 @03:38PM
(#33512066)
I've struggled with children sizing in flex. Children take up more space depending on their content. If the content overflows, flex doesn't handle that well either.
Grid seems to handle this better when you specify grid-template-column.
Anybody know a good flex-specific solution?
Maybe this:
https://drafts.csswg.org/css-rhythm/
The searchable keyword for that is "responsive".
Using length units related to viewport size on max-widht may help.
I guess I find keeping all the css properties in my head for all the different placement solutions cumbersome, flex and especially grid have a huge amount of functionality and custom properties, and I have been achieving everything fine using flex and a table when I need a literal table of data.