响应式 css-grid 只有 2 个单元格

Question

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

Vertical Layout

Lorizontal Layout

基本上菜单单元格应该有尺寸（最小内容，最小内容），而正文单元格应该分别为水平和垂直情况下的（自动，100％）或（100％，自动）。我只是不确定如何 1. 使用 css 网格来实现任何接近此行为的东西，以及 2. 使用 css 根据主体单元格的区域选择水平或垂直布局。

Answer 1

使用@media并将第二个单元格width:100%;设置为水平布局

Answer 2

感谢@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 个。