我有一個(gè)最小高度為 90vh 的 div 和一個(gè)子 div，它設(shè)置為一個(gè)網(wǎng)格，最多有 20 個(gè)子級(jí)和 5 個(gè)等寬的列。我想設(shè)置一個(gè)網(wǎng)格：當(dāng)它有 =< 4 行時(shí)，它們應(yīng)該占據(jù)完整的最小高度。因此，如果有 4 行，每行應(yīng)占高度的 25%，則 3 (33%)、2 (50%) 和 1 (100%) 行也是如此。當(dāng)行數(shù)超過 4 且屏幕寬度超過 600 像素時(shí)（例如，當(dāng)列數(shù)在較小的屏幕上下降時(shí)），每行占用其原始高度的 25% (22.5vh)在較小的屏幕上，每行應(yīng)占原始最小高度 (11.25vh) 的 12.5%我想知道是否可以建立這樣的網(wǎng)格。到目前為止我的代碼（我正在使用樣式組件）：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 歲以上的兒童，可根據(jù)需要進(jìn)行縮放。然而，當(dāng) =< 15 時(shí)，行仍然只占最小高度的 25%。
2 回答
胡說叔叔
TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超8個(gè)贊
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 歲以上的兒童，可根據(jù)需要進(jìn)行縮放。然而，當(dāng) =< 15 時(shí)，行仍然只占最小高度的 25%。
縹緲止盈
TA貢獻(xiàn)2041條經(jīng)驗(yàn) 獲得超4個(gè)贊
您可以通過傳遞 prop 以編程方式執(zhí)行此操作
<ColorBoxesGrid?boxesCount={colorBoxes.length}>{colorBoxes}</ColorBoxesGrid>比定義你的風(fēng)格基于boxesCount
- 2 回答
- 0 關(guān)注
- 148 瀏覽
添加回答
舉報(bào)
0/150
提交
取消