时间戳

首页 > 解决方案 > 如何使网格行占据全高直到达到最小尺寸？

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

问题描述

我有一个最小高度为 90vh 的 div 和一个子 div，它设置为一个网格，最多 20 个子元素和 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%。

标签： htmlcssreactjsgrid-layoutstyled-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: 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 重复可能不是最好的解决方案，但它确实有效。希望这对某人有帮助！

推荐阅读