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

Question

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

Vertical Layout

Lorizontal Layout

本质上，菜单单元格应具有尺寸 (min-content, min-content)，正文单元格在水平和垂直情况下应分别为 (auto, 100%) 或 (100%, auto)。我只是不确定如何 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 个单元格。

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

Responsive css-grid with only 2 cells

html

css

responsive-design

css-grid

responsive