How can I create a responsive css grid layout for two cells that will choose whether to stack them vertically or horizontally in order to maximize the area of the second cell? (or some approximating heuristic)
Essentially the menu cell should have dimensions (min-content, min-content), and the body cell should be (auto, 100%) or (100%, auto) for the horizontal and vertical case respectively. I'm just not sure how to 1. Use css grids to implement anything close to this behavior, and 2. Use css to choose the horizontal or vertical layout based on the area of the body cell.
Use @media and set the 2nd cell width:100%; for horizontal layout
