css - 垂直扩展 CSS 网格行

Question

问题

我正在尝试 CSS 网格(通过 React 样式的组件)，并且有一个包含两列(一行)的网格。第二列的单元格本身有一个网格，其中三个元素分布在两行中。请参阅图片以供引用。

问题

如何让 some code block (OutputContainer) 成为封闭 block (OutputGrid 的行)高度的 100% )?使用 height: 100% 似乎没有效果。

相关代码如下:

const Grid = styled.section`
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 200px;
`;

const OutputGrid = styled.section`
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 3fr 1fr;
`;

const OutputContainer = styled.section`
  grid-column: span 2;
`;

这是一个带有演示的沙箱:https://codesandbox.io/s/409ozox509

Answer 1

是否this工作？我给 Card 附上 CodeBlock height: 100% 和黑色背景。如果解决了您的问题，请标记“正确答案”。