Как заставить ряды сетки принимать полную высоту, пока они не достигнут минимального размера?

Question

У меня есть div с минимальной высотой 90vh и дочерний div, который настроен как сетка с максимум 20 дочерними и 5 столбцами одинаковой ширины. Я хочу настроить сетку таким образом:

• Когда она имеет = <4 строки, они должны занимать всю минимальную высоту. Таким образом, если есть 4 строки, каждая из которых должна занимать 25% высоты, то же самое относится к 3 (33%), 2 (50%) и 1 (100%) строкам. </li>
• Когда он имеет> 4 строки и ширина экрана более 600 пикселей (например, когда номер столбца уменьшается на меньших экранах), каждая строка занимает 25% своей первоначальной высоты (22,5 В * ч)
• А на меньших экранах каждая строка должна взять 12,5% от первоначальной минимальной высоты (11,25 Вч)

Интересно, можно ли настроить такую ​​сетку.

Код, который у меня есть до сих пор (я используя styled-компоненты):

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% минимальной высоты. </p>

Answer 1

Ответ в основном говорит сам за себя, вот код, который я получил в конце:

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 могут быть не лучшим решением, но оно работает. Надеюсь, это кому-нибудь поможет!

Answer 2

Вы можете сделать это программно, передав пропу

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

Чем определить ваши стили на основе boxesCount

Проверьте, как это сделать здесь