CSS Grid. It’s a mostly simple spec that allows for what you’re asking for and a whole bunch more (including different grids for different screen sizes, which tables definitely don’t do). Probably start with https://css-tricks.com/snippets/css/complete-guide-grid/

Are you sure? Have you tried?

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.

Grid tracks (rows and columns) can be content sized. You just have to set the dimensions to something other than a concrete size (you have used `33vh` here). See the auto, min-content, max-content and fit-content values for height/width (https://developer.mozilla.org/en-US/docs/Web/CSS/height). You can get close to table-like behaviour by setting the height to `fit-content(33vh)`. There is also a minmax function which allows you to set minimums and maximums and have it content size between that.

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/

> One of the nice things about grid is that you can size the tracks on the parent element

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/36k1079x/

Having `height: 100%` (or `flex: 1` or grid equivalent) on every ancestor is just what you have to do for CSS (it applies to all layout modes, not just grid). My way to make this less painful is generally to remove any extraneous divs and try to keep the trees as shallow as possible.

Hi friend, if you change the `height` values to `min-height` in that fiddle, I think you get the behavior you're looking for.

Absolutely perplexed by the other answers that think CSS grid is a hammer for every nail. In your example without a table, you can just drop `display grid` and set `div {min-height: 33vh}`.

But now I'm on a wide screen and want the lower two containers side-by-side with the top element spanning across the top. You can't do that with tables.

And that request will come.

Flexbox can do it https://jsfiddle.net/fenys70z/

Add

  display: flex;
  align-items: center;
  margin: 1px;

To `.container div` to get the vertical centering in the OP comment and the slight border. https://jsfiddle.net/g4qv2dr6/1/

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/

Eg grid + vh unit. Look them up and you should find plenty content!

When I try that, the rows do not expand if the content is larger than 33% of the screen height:

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.

Hey there, I thought about this for a little bit because I find table layouts more pain than they are worth and the secret sauce that's missing from the examples above is nesting!

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/

Don't put the grid on the body:

https://jsfiddle.net/y15qszjp/

With grid: https://jsfiddle.net/1oghfL9s/

does not expand the table if the content doesnt fit

https://i.imgur.com/K1gOKGL.png

CSS Grid.

Easier said than done. See my other replies in this thread.