When I try, I don't get the nice behavior of tables, but a stiff layout that does not adapt to its content. Instead the content overflows the rows:
https://jsfiddle.net/3hfosn5k/
The nice thing about tables is that I know the table cells will always surround their content. Nothing will flow out of the cells.
One of the nice things about grid is that you can size the tracks on the parent element, and all you have to do on the children is specify which rows/columns they span. It works much better when you want to do the sort of things you use rowspan and colspan for with tables.
EDIT: Setting height: 100% was also preventing the grid from expanding. Try this JSFiddle https://jsfiddle.net/c3m2194b/
Yep, it's nice to have an alternative to flex (where children determine their own size with flex-grow / flex-shrink / flex-basis).
> Setting height: 100% was also preventing the grid from expanding. Try this JSFiddle https://jsfiddle.net/c3m2194b/
This is an issue I've run into a lot. Well the opposite, when I want overflowing grid cells to gain a scroll bar instead of expanding the parent. Turns out this is only doable if the grid element has an explicitly defined height, which means hard-coding a height like `height: 50vh` or ensuring every ancestor of the grid has `height: 100%` defined, which is pretty gross.
https://jsfiddle.net/3hfosn5k/
Scroll down and you will see that the blue color of the bottom row ends and the text overflows it.
But I want what table cells do: Expand if their content is too large to fi.
Just like Tables have <table> and then <tr> - your div's need a similar parent-child relationship to work.
Here's a working fiddle: https://jsfiddle.net/0389jsca/
display: flex;
align-items: center;
margin: 1px;
The border still kind of looks better on the table one, it's like the flexbox border is not the same size vertically and horizontally.
Once you add enough text that they need to re-shape, they both behave differently. I kind of like the look of the flexbox one better though.
Table https://jsfiddle.net/gs73eyd5/1/
Flexbox https://jsfiddle.net/g4qv2dr6/2/
Also they both break pretty badly if you put some content so long that would require an automatic line-break (make sure you scroll to the right to see) With flexbox the content overflows outside of the container, but it preserves the sizing of the other elements. Table expands the whole container but in doing so ruins the other two rows.
https://jsfiddle.net/ysu7fgk1/ vs https://jsfiddle.net/q6dcph0x/
And that request will come.
I still prefer to use tables to layout my websites.
Question: Say I want a layout that has a top row, a middle row and a bottom row. Each row gets 33% of the screen space. Unless the content does not fit. Then the row should expand to the content.
Here is the table version:
https://jsfiddle.net/vg2ey8r9/
How do you do that without a table?