是否可以在css中得到这个网格布局？

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

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

但是回到你的问题，使用

CSS-grids

检查这个例子：

<div className="grid auto-rows-[192px] grid-cols-3 gap-4">
  <div className="row-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900"></div>
  <div className="row-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900"></div>
  <div className="row-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900"></div>
  <div className="row-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900 col-span-2"></div>
  <div className="row-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900"></div>
  <div className="row-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900"></div>
  <div className="row-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900 col-span-2"></div>
</div>

结果：https://play.tailwindcss.com/maBgA9Aicf