Bento Grid 样式汇总

23天前 博客 58 访问量
UIBak Bento Grid 样式汇总

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

Bento 资源汇总

Bento

https://bentotailwind.com/

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 设计开始的。

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

苹果 14

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

构建 Bento Grid:分步代码

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

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

使用 CSS 网格

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

css 网格示例



<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 列

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

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。

css 弹性框示例



<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>


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

标签:

UIBak Avatar
您觉得这篇文章是否有帮助?