Я пытаюсь создать "сетку", как на картинке ниже. Я использую React, Sass en EC6. Однако проблема, с которой я сталкиваюсь:
На рисунке показан пример из 9 строк и 9 столбцов, но это можно изменить (почти) на что угодно. Например, может быть 3 строки и 10 столбцов или 5 строк и 2 столбца.
Но мне нужно, чтобы содержимое всегда было на экране, иначе контейнер имеет максимальную ширину и высоту.
![Grid-like display[1]](https://i.stack.imgur.com/i5xdf.png)
Я хочу, чтобы квадраты в центре всегда были квадратными, при этом содержимое показывалось как можно большего размера (без фиксированной ширины и высоты).
Если у меня есть, например, 6 столбцов и 2 строки, мне нужно, чтобы квадраты были такой же ширины и высоты, как 100/6 от максимальной ширины.
Но если я переверну числа и получу 2 столбца и 6 строк, я хочу, чтобы квадраты имели размер 100/6 максимальной высоты.
Я пробовал несколько подходов CSS, например, использование flexbox, но безуспешно.
Пример: https://codepen.io/maffekill/pen/ZNZwXz
Есть ли способ решить эту проблему без использования JS?
.flex-container{
height:100px;
display:flex;
flex-flow:column;
border:1px solid black;
}
.flex-row {
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
line-height:30px;
}
.flex-item {
background: tomato;
margin: 5px;
color: white;
font-weight: bold;
font-size: 1.5em;
text-align: center;
flex: 1 0 auto;
height:auto;
}
.flex-item:before {
content:'';
float:left;
padding-top:100%;
}
<body>
<div class="flex-container">
<div class="flex-row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>
<div class="flex-row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>
</div>
</body>
Этот метод не учитывает высоту.
Теперь я знаю, что могу рассчитать всю ширину и высоту в JS, а затем соответственно перейти на CSS, но это не будет вдвое меньше, чем в чистом CSS, плюс для этого потребуется много дополнительных ресурсов.
Есть ли способ сделать это с чистым CSS / HTML, без использования JS?
P.S. Это мой первый вопрос в стеке, пожалуйста, не стесняйтесь комментировать, если что-то неясно;)