Question

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

当它具有= <4行时，它们应该占用完整的最小高度。因此，如果有4行，则每行应占高度的25％，对于3行（33％），2行（50％）和1行（100％）也是一样。
当它具有> 4行并且屏幕宽度大于600像素时（例如，当较小的屏幕上的列数下降时），每行占其原始高度（22.5vh）的25％
在较小的屏幕上，每行应占原始最小高度（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

您可以通过传递道具

以编程方式进行操作

<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>
...

所有媒体查询都是以这种方式设置的，正如我可以告诉它何时要包装一样。电池的最小最大功率不得小于22.5vh。所有@media重复可能不是最好的解决方案，但它可以工作。希望这对某人有帮助！

如何使网格行达到最大高度，直到达到最小大小？

2 个答案: