next.js 弹性高度[duplicate]

此问题在此处已有答案：

CSS-only masonry layout（5个答案）
9天前关闭
在我的一个项目中，我为用户评论创建了一个类似于下面的结构。我的观点是：每个评论的长度可能会有所不同。这意味着每行中的元素可以有不同的长度。我希望每行中有3个div，我想让其他的div从第一行的div下面开始。所以我的目标是创建不规则的行。但是我不能做到这一点。我怎么能做到呢？（你可以看下面的图片）。
编辑：根据要求添加代码片段。链接：https://play.tailwindcss.com/yw2VoqpTBi

<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 min-h-fit ">
      <div className="h-fit grid gap-8 p-6 border rounded-lg bg-red-500">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
        consectetur eos commodi maiores a laudantium provident dignissimos,
        quo cupiditate sapiente delectus laborum facere temporibus quos enim
        incidunt perspiciatis natus saepe expedita praesentium libero dicta
        nisi. Cupiditate repudiandae minima ipsum doloremque, ab molestias
        nemo ea perferendis hic. Eaque architecto hic repellendus.
      </div>
      <div className="h-fit grid gap-8 p-6 border rounded-lg bg-red-500">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis
        voluptate omnis pariatur ullam eos reiciendis sed reprehenderit
        quisquam earum? Impedit vel blanditiis laudantium quos repellat
        asperiores voluptas, libero consectetur mollitia sint. Fugit eius
        dicta obcaecati facilis alias cum praesentium, ipsa veniam similique
        earum eaque dignissimos velit odit ipsam omnis facere modi beatae id
        voluptatum non. Quasi in accusantium optio obcaecati maxime
        pariatur, atque doloribus est? Quo, harum? Commodi ipsum a debitis
        cupiditate nam fuga consequatur harum eius dicta temporibus
        inventore unde obcaecati dolorem, officia perspiciatis voluptas enim
        quisquam nostrum tempore, beatae vel dolore minus. Vitae quaerat
        repellat deserunt iste temporibus expedita. Velit numquam officia
        nulla, sint corporis ab voluptatum blanditiis veritatis maxime, cum
        quas adipisci veniam corrupti? Eum totam quam vitae aperiam ratione,
        accusantium deserunt exercitationem culpa libero odit provident
        quaerat veniam voluptas, tempore eos animi ab. Autem, illo. Ea,
        maxime omnis. Repellendus nam debitis commodi dignissimos rerum
        beatae? Impedit?
      </div>
      <div className="h-fit grid gap-8 p-6 border rounded-lg bg-red-500">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat
        aperiam, dolorem obcaecati atque praesentium nemo velit quae nihil
        voluptates id modi nam inventore itaque excepturi in saepe possimus
        magni quibusdam?
      </div>
      <div className="h-fit grid gap-8 p-6 border rounded-lg bg-red-500">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus
        accusantium atque sit a quo eum, fuga inventore quisquam
        consequuntur necessitatibus velit possimus ducimus voluptatum vitae!
        Eaque unde, odio animi dolorem, architecto quas incidunt sint culpa
        optio commodi provident, dicta perspiciatis officia! Sunt laborum
        rem cumque placeat animi accusamus unde eveniet.
      </div>
      <div className="h-fit grid gap-8 p-6 border rounded-lg bg-red-500">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
        eum expedita alias consequuntur laudantium a tempore voluptatem
        ipsum? Voluptates harum magni eius non fugiat! Sunt perferendis nam
        odit eligendi minus. Accusantium ullam illum, reiciendis culpa ipsa
        excepturi quae voluptates velit vitae iste commodi exercitationem
        laborum praesentium error voluptatem repudiandae ut iusto voluptas,
        sed ducimus doloremque laboriosam sapiente! Vel, et nam corporis
        voluptas soluta harum quidem quisquam tempora dolore aspernatur
        ipsam?
      </div>
      <div className="h-fit grid gap-8 p-6 border rounded-lg bg-red-500">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
        eum expedita alias consequuntur laudantium a tempore voluptatem
        ipsum? Voluptates harum magni eius non fugiat! Sunt perferendis nam
        odit eligendi minus. Accusantium ullam illum, reiciendis culpa ipsa
        excepturi.
      </div>
    </div>

字符串
Image of the problem.的

您想要实现的布局有点类似于 Masonry layout。您可以使用flex实用程序和space-x / space-y手动创建列并实现布局。类似于：

<div class="flex min-h-fit space-x-4">
  <div class="w-full sm:w-1/2 md:w-1/3">
    <!-- First column -->
    <div class="h-fit p-6 border rounded-lg bg-red-500 mb-4">
      <!-- Your content -->
    </div>
    <div class="h-fit p-6 border rounded-lg bg-red-500 mb-4">
      <!-- Your content -->
    </div>
  </div>
  <div class="w-full sm:w-1/2 md:w-1/3">
    <!-- Second column -->
    <div class="h-fit p-6 border rounded-lg bg-red-500 mb-4">
      <!-- Your content -->
    </div>
    <div class="h-fit p-6 border rounded-lg bg-red-500 mb-4">
      <!-- Your content -->
    </div>
  </div>
  <div class="w-full sm:w-1/2 md:w-1/3">
    <!-- Third column -->
    <div class="h-fit p-6 border rounded-lg bg-red-500 mb-4">
      <!-- Your content -->
    </div>
    <div class="h-fit p-6 border rounded-lg bg-red-500 mb-4">
      <!-- Your content -->
    </div>
  </div>
</div>

字符串
Tailwind Playground的

next.js 弹性高度[duplicate]

1条答案

相关问题

热门标签

最新问答