是否可以在CSS中获得这个网格或Flexbox布局？

Question

所以我想创建一个网格或弹性盒布局，看起来像这样

。

因此图像每个框中的所有数据都是动态的，因此我不确定每个框的大小。我正在使用 tailwind 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>

Answer 1

您可以创建三个网格列并将元素放入每个网格列中：

添加高度属性是为了模拟更长的文本量或更大尺寸的内容，您可以将其删除，它仍然应该具有相同的功能

<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

Answer 2

您正在寻找的称为 Bento 网格 布局。 您可以查看一些示例这里

但是回到你的问题，使用

CSS Columns

你可以实现布局

检查这个例子：

<div class="columns-3 gap-4">
  <div class="mb-4 h-24 break-inside-avoid rounded-xl border-2 border-[#292929] bg-[#eeeeee] p-4"></div>
  <div class="mb-4 h-32 break-inside-avoid rounded-xl border-2 border-[#292929] bg-[#eeeeee] p-4"></div>
  <div class="mb-4 h-36 break-inside-avoid rounded-xl border-2 border-[#292929] bg-[#eeeeee] p-4"></div>
  <div class="mb-4 h-32 break-inside-avoid rounded-xl border-2 border-[#292929] bg-[#eeeeee] p-4"></div>
  <div class="mb-4 h-32 break-inside-avoid rounded-xl border-2 border-[#292929] bg-[#eeeeee] p-4"></div>
  <div class="mb-4 h-32 break-inside-avoid rounded-xl border-2 border-[#292929] bg-[#eeeeee] p-4"></div>
  <div class="mb-4 h-16 break-inside-avoid rounded-xl border-2 border-[#292929] bg-[#eeeeee] p-4"></div>
  <div class="mb-4 h-16 break-inside-avoid rounded-xl border-2 border-[#292929] bg-[#eeeeee] p-4"></div>
  <div class="mb-4 h-64 break-inside-avoid rounded-xl border-2 border-[#292929] bg-[#eeeeee] p-4"></div>
</div>

结果：https://play.tailwindcss.com/7teTDt3LMZ