Можно ли получить эту сетку или макет Flexbox в CSS?
Итак, я хочу создать макет сетки или флексбокса, который выглядит примерно так:
.
Таким образом, все данные внутри каждого поля изображения являются динамическими, поэтому я не уверен в размере каждого поля. Я использую CSS попутного ветра и простой HTML, CSS, JS.
Я создаю родительский элемент с class = grid grid-cols-3, а у самого столбца есть class = col-span-1. При этом тело равномерно разделено на 3 столбца, но поле следующей строки начинается с конца самого длинного элемента предыдущей строки, т. е. высота каждой строки определяется самым длинным полем этой строки. Так вот как это оказывается
.
Я могу использовать class = row-span-2 в самой длинной коробке, но, как уже было сказано, я не знаю, каков будет размер каждой коробки, поэтому не могу использовать class = row-span-2.
Вот что у меня есть. Предположим, у Box x есть весь код html и css для нужного поля.
<div class = " grid grid-cols-3 m-12 gap-12 justify-center">
<div id = "post" class = "max-h-fit h-fit rounded-xl overflow-hidden">
<Box 1/>
</div>
<div id = "post2" class = "max-h-fit h-fit rounded-xl overflow-hidden">
<Box 2/>
</div>
<div id = "post3" class = "max-h-fit h-fit rounded-xl overflow-hidden">
<Box 3/>
</div>
<div id = "post4" class = "max-h-fit h-fit rounded-xl overflow-hidden">
<Box 4/>
</div>
<div id = "post5" class = "max-h-fit h-fit rounded-xl overflow-hidden">
<Box 5/>
</div>
<div id = "pos6t" class = "max-h-fit h-fit rounded-xl overflow-hidden">
<Box 6/>
</div>
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
То, что вам нужно, называется макетом сетки Bento. Вы можете посмотреть несколько примеров здесь
Но возвращаясь к вашему вопросу, с помощью CSS Columns вы можете добиться макета.
Проверьте этот пример:
<div class = "parent columns-3 gap-4">
<div class = "mb-4 h-24 break-inside-avoid rounded-xl bg-[pink] p-4">1</div>
<div class = "mb-4 h-32 break-inside-avoid rounded-xl bg-[tomato] p-4">2</div>
<div class = "mb-4 h-36 break-inside-avoid rounded-xl bg-[skyblue] p-4">3</div>
<div class = "mb-4 h-32 break-inside-avoid rounded-xl bg-[gold] p-4">4</div>
<div class = "mb-4 h-16 break-inside-avoid rounded-xl bg-[violet] p-4">5</div>
<div class = "mb-4 h-32 break-inside-avoid rounded-xl bg-[lightcoral] p-4">5</div>
<div class = "mb-4 h-16 break-inside-avoid rounded-xl bg-[royalblue] p-4">6</div>
<div class = "mb-4 h-64 break-inside-avoid rounded-xl bg-[lightgreen] p-4">7</div>
</div>
Результат: https://play.tailwindcss.com/7teTDt3LMZ
Большое спасибо. Это действительно работает
Вы можете создать три столбца сетки и поместить элементы внутри каждого из них:
Атрибуты высоты добавляются для имитации больших объемов текста или содержимого большего размера. Вы можете удалить их, и они все равно будут работать так же.
<div class = "grid grid-cols-3">
<div>
<div class = "m-4 mr-2 bg-green-200" style = "height: 150px">Box 1 here</div>
<div class = "m-4 mr-2 bg-blue-200" style = "height: 200px;">Box 2 here</div>
</div>
<div>
<div class = "m-4 mx-2 bg-yellow-200" style = "height: 300px">Box 3 here</div>
<div class = "m-4 mx-2 bg-red-200" style = "height: 400px;">Box 4 here</div>
</div>
<div>
<div class = "m-4 ml-2 bg-pink-200" style = "height: 250px">Box 5 here</div>
<div class = "m-4 ml-2 bg-purple-200" style = "height: 200px;">Box 6 here</div>
</div>
</div>
https://play.tailwindcss.com/XvhOwesYEN
Большое спасибо. Как я могу быть настолько тупым, чтобы не подумать об этом подходе.
Один из способов — создать родительский элемент div flex с flex-row и обернуть в него три внутренних div.
<div class = "flex flex-row">
<div class = "">
<Box 1/>
<Box 2/>
<Box 3/>
...
</div>
<div class = "">
<Box 4/>
<Box 5/>
...
</div>
<div class = "">
<Box 6/>
...
</div>
</div>
Честно говоря, желаемый результат не похож на сетку и, вероятно, его можно достичь с помощью Flexbox