Я хочу создать сетку с чувствительными квадратами.
Мне кажется, что я смогу сделать это с помощью макета CSS Grid, но проблема с установкой высоты каждого квадрата равным ширине.
Также возникает проблема с установкой желоба между каждым квадратом.
Будет ли лучше использовать flexbox?
В настоящее время мой HTML выглядит так, но будет динамичным, поэтому можно добавить больше квадратов. И, конечно, он должен быть отзывчивым, поэтому идеально будет использовать медиа-запрос, чтобы свернуть его до одного столбца.
<div class="square-container">
<div class="square">
<div class="content">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
</div>
Используя сетку css, это насколько я получил
.square-container{
display: grid;
grid-template-columns: 30% 30% 30%;
.square {
}
}
Мне удалось немного поработать с flexbox и использовать пробел между выравниваниями квадратов с хорошим желобом, но он все еще пытался получить высоту, соответствующую ширине каждого квадрата.
Мне не удалось найти примеры того, как это делается с помощью flexbox или сетки, но любые примеры также будут оценены.
Спасибо