Html 只有2个单元格的响应css网格

如何为两个单元格创建响应css网格布局，以选择是垂直堆叠还是水平堆叠，从而最大化第二个单元格的面积？（或某种近似启发式）

---

基本上，菜单单元格应具有尺寸（最小内容，最小内容），对于水平和垂直情况，主体单元格应分别为（自动，100%）或（100%，自动）。我只是不知道该怎么做。使用css网格实现任何接近此行为的内容，以及2。使用css根据主体单元格的面积选择水平或垂直布局。

使用

@media

并设置第二个单元格

宽度：100%用于水平布局
感谢@rijaul sk指出@media标签，我得到了一个基于此的解决方案，但与他的解决方案并不完全相同

  @media (orientation: landscape) {
    div.ascii {
      grid-area: 1 / 2 / span 2 / span 1;
    }
  }

  @media (orientation: portrait) {
    div.ascii {
      grid-area: 2 / 1 / span 1 / span 2;
    }
  }

  div.container {
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: min-content auto;
    height: 100%; /*for some reason this is necessary*/
  }

基本上，您将网格定义为4个单元格，另一个单元格跨越其中的2个。
老实说，在这种情况下，我宁愿使用flexboxBy勾选正确答案，您可以结束主题，这可能有助于future seekersHappy帮助您