具有网格布局的卡片部分

Question

你好，基本上我到目前为止（在移动设备上，我设法使其响应，但是在较大的屏幕上，我无法设置版式的高度，因此所有子级中的版式都相同）

在台式机上：

在手机上（确定）：

但是当它不是移动设备时，我无法设置身高

我想要这个：

代码：

  <TestingLive>
    <div class="a">
      <span>a</span>
    </div>
    <div class="b">
      <span>b</span>
    </div>
    <div class="c">
      <span>c</span>
    </div>
    <div class="d">
      <span>d</span>
    </div>
    <div class="e">
      <span>e</span>
    </div>
  </TestingLive>

和我的css（带有样式的comp）

const TestingLive = styled.div`
  display: grid;
  grid-template-areas:
    "a b c"
    "a d e";
  grid-gap: 4px;
  grid-template-columns: 40vw 1fr 1fr;

  ${media.lessThan("medium")`
  grid-template-columns:1fr;
  grid-auto-rows: 200px;
  grid-template-areas:
  'a '
  'b'
  'c'
  'd'
  'e';
  `}

  margin-top: 50px;
  & > * {
    background-color: #333;
    color: white;
    position: relative;
  }

  & .a {
    grid-area: a;
  }

  & .b {
    grid-area: b;
  }

  & .c {
    grid-area: c;
  }

  & .d {
    grid-area: d;
  }

  & .e {
    grid-area: e;
  }
`;

示例：

https://codesandbox.io/s/great-snowflake-4dwpy

Answer 1

如果我理解正确（您希望大磁贴为60vh，小磁贴为30vh），只需添加：

div {
    min-height: 30vh;
  }

如果不是您所需要的，请给出更好的描述和示例。

Answer 2

使用vh在calc中设置高度，如果没有多余的值，则简单height:100vh页面上的空格，例如margin padding等

.fHHWeb {
    display: grid;
    grid-template-areas:
        "a b c"
        "a d e";
    grid-gap: 4px;
    grid-template-columns: 40vw 1fr 1fr;
    margin-top: 50px;
    height: calc(100vh - 60px);
}

Answer 3

我做了一些更改https://codesandbox.io/s/damp-silence-uc5ui但是我认为，您的网格项目只需要一些内容。隐式网格中自动创建的行的默认设置是自动调整它们的大小。这意味着它们将包含添加到其中的内容而不会引起溢出。