如何使网格行占据全高，直到达到最小尺寸？

Question

我有一个最小高度为 90vh 的 div 和一个子 div，它设置为一个网格，最多有 20 个子级和 5 个等宽的列。我想设置一个网格：

• 当它有 =< 4 行时，它们应该占据完整的最小高度。因此，如果有 4 行，每行应占高度的 25%，则 3 (33%)、2 (50%) 和 1 (100%) 行也是如此。

• 当行数超过 4 且屏幕宽度超过 600 像素时（例如，当列数在较小的屏幕上下降时），每行占用其原始高度的 25% (22.5vh)

• 在较小的屏幕上，每行应占原始最小高度 (11.25vh) 的 12.5%

我想知道是否可以建立这样的网格。

到目前为止我的代码（我正在使用样式组件）：

const ColorBoxesWrap = styled.div`

  min-height: 90vh;

  width: 100%;

`;

const ColorBoxesGrid = styled.div`

  display: grid;

  grid-auto-rows: 11.25vh;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  @media (min-width: 1200px) {

    grid-template-columns: repeat(5, 1fr);

  }

  @media (min-width: 500px) {

    grid-auto-rows: 22.5vh;

  }

`;

成分：

...

<ColorBoxesWrap>

    <ColorBoxesGrid>{colorBoxes}</ColorBoxesGrid>

</ColorBoxesWrap>

...

此代码适用于 15 岁以上的儿童，可根据需要进行缩放。然而，当 =< 15 时，行仍然只占最小高度的 25%。

Answer 1

const ColorBoxesWrap = styled.div`&nbsp; min-height: 90vh;&nbsp; width: 100%;`;const ColorBoxesGrid = styled.div`&nbsp; display: grid;&nbsp; grid-auto-rows: 11.25vh;&nbsp; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));&nbsp; @media (min-width: 1200px) {&nbsp; &nbsp; grid-template-columns: repeat(5, 1fr);&nbsp; }&nbsp; @media (min-width: 500px) {&nbsp; &nbsp; grid-auto-rows: 22.5vh;&nbsp; }`;成分：...<ColorBoxesWrap>&nbsp; &nbsp; <ColorBoxesGrid>{colorBoxes}</ColorBoxesGrid></ColorBoxesWrap>...此代码适用于 15 岁以上的儿童，可根据需要进行缩放。然而，当 =< 15 时，行仍然只占最小高度的 25%。

Answer 2

您可以通过传递 prop 以编程方式执行此操作<ColorBoxesGrid boxesCount={colorBoxes.length}>{colorBoxes}</ColorBoxesGrid>比定义你的风格基于boxesCount