Bento Grid 样式汇总

8个月前博客 1313 访问量

Bento Grids 是一个非常流行的页面布局方式，适用于现代多终端适配下的组合式页面排版。

Bento 资源汇总

Bento

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

Flyonui

https://flyonui.com/blocks/bento-grid/bento-grid

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>

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