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

Question

我有一个 div，min-height 为 90vh 和一个 child div，设置为网格，最大为 20 children 和等宽的 5 列。我想设置一个网格：

当它有 =< 4 行时，它们应该占满 min-height。因此，如果有 4 行，每行应占高度的 25%，则 3 (33%)、2 (50%) 和 1 (100%) 行也是如此。
当它有 > 4 行且屏幕宽度超过 600 像素时（例如，当列号在较小的屏幕上下降时），每行占其原始高度 (22.5vh) 的 25%
在较小的屏幕上，每行应占原始 min-height (11.25vh)

不知能否设置这样的网格

我目前的代码（我正在使用 styled-components）：

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+ children，可根据需要缩放。但是，=< 15，行仍然只占 min-height.

的 25%

Answer 1

您可以通过传递 prop

以编程方式执行此操作

<ColorBoxesGrid boxesCount={colorBoxes.length}>{colorBoxes}</ColorBoxesGrid>

比根据 boxesCount

定义样式

检查如何做到这一点here

Answer 2

答案基本上已经说明了一切，这是我最后得到的代码：

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: 500px) {
    grid-auto-rows: minmax(22.5vh, ${(props) => `${90 / Math.ceil(props.colorsCount / 2)}vh`});
  }
  @media (min-width: 750px) {
    grid-auto-rows: minmax(22.5vh, ${(props) => `${90 / Math.ceil(props.colorsCount / 3)}vh`});
  }
  @media (min-width: 1000px) {
    grid-auto-rows: minmax(22.5vh, ${(props) => `${90 / Math.ceil(props.colorsCount / 4)}vh`});
  }
  @media (min-width: 1200px) {
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: minmax(22.5vh, ${(props) => `${90 / Math.ceil(props.colorsCount / 5)}vh`});
  }
`;

...
<ColorBoxesWrap>
    <ColorBoxesGrid colorsCount={colorsCount}>
        {colorBoxes}
    </ColorBoxesGrid>
</ColorBoxesWrap>
...

所有媒体查询都是这样设置的，因为我可以知道它何时会换行。 Minmax 要求电池不小于 22.5vh。所有@media 重复可能不是最好的解决方案，但它确实有效。希望这对某人有所帮助！

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

How to make grid rows take full height until they reach minimal size?

html

css

grid-layout

reactjs

styled-components