Bento 资源汇总

Bento

Bento Tailwind UI Library，Easily create beautiful bento grids with shadcn and TailwindCSS. Elevate your UI design effortlessly.

TailwindUI Bento grids

https://tailwindui.com/components/marketing/sections/bento-grids

MagicUI Bento

https://magicui.design/docs/components/bento-grid

BentoGrids

https://bentogrids.com/

Bento grid is a layout used to showcase the features of a product in a simple and elegant way.

Bento Tailwind 开发教程

Bento 网格用途广泛，非常适合显示各种内容，如图像、文本、混合媒体等。它们以紧凑而有序的方式展示大量内容，使您的网站或应用看起来简洁而引人入胜。

趋势和示例

有人说这是从 Windows 8 和metro 设计开始的。

然而，近年来真正的潮流引领者是苹果。
他们在视频演示和网站上广泛使用便当网格布局，使其成为一种流行的设计选择。

如果你正在寻找设计灵感，可以查看bentogrids。这是一个精选集，展示了网络上最好的便当网格布局。

构建 Bento Grid：分步代码

创建 bento 网格布局的方法有很多种，今天，我将向您展示其中一些使用 Tailwind CSS 和 React 的方法。

请注意，所提供的代码示例默认不是响应式的，因为它们
也旨在方便在移动设备上查看。如果您想让它们响应式，只需添加断点即可调整不同屏幕尺寸的
布局。

使用 CSS 网格

构建 bento 网格的一种方法是使用 CSS Grid 以及 grid-template-columns、grid-auto-rows 和 grid-row。查看此示例：



<div className="grid auto-rows-[192px] grid-cols-3 gap-4">
  {[...Array(7)].map((_, i) => (
    <div
      key={i}
      className={`row-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900 ${
        i === 3 || i === 6 ? "col-span-2" : ""
      }`}
    ></div>
  ))}
</div>

我们使用 md:col-span-2 实用程序使第 3 和第 6 个项目在中等屏幕及以上尺寸上跨越两列。

使用 CSS 列

如果项目的顺序无关紧要，并且您需要按列排列，则可以选择使用列数、列间隙和项目底部边距进行多列布局。



<div className="columns-1 gap-4">
  {[24, 32, 36, 32, 32, 32, 16, 16, 64].map((height, index) => (
    <div
      key={index}
      className={`mb-4 h-${height} break-inside-avoid rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900`}
    />
  ))}
</div>

该数组包含每个卡片组件的高度。或者，您可以使用完整高度并让子组件设置卡片高度。

使用 CSS Flexbox

和列一样，弹性框也是不错的选择。您可以在项目上使用 flex-wrap、flex-grow 和 margin-bottom。



<div className="flex gap-4">
  {[
    [24, 32, 32, 16, 16],
    [32, 40, 56],
    [64, 32, 32],
  ].map((card, index) => (
    <div className="flex-1" key={index}>
      {card.map((height, index) => (
        <div
          className={`mb-4 h-${height} rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900`}
          key={index}
        ></div>
      ))}
    </div>
  ))}
</div>

代码使用一个数组来存储每列卡片的高度。数组的第一个元素是第一列卡片高度的数组，第二个元素是第二列卡片高度的数组，依此类推。同样，您可以使用完整高度并让子组件设置卡片高度。

Bento Grid 样式汇总