我有一個最小高度為 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%。