Bento Grid 样式汇总
Bento Grids 是一个非常流行的页面布局方式,适用于现代多终端适配下的组合式页面排版。
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
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>
代码使用一个数组来存储每列卡片的高度。数组的第一个元素是第一列卡片高度的数组,第二个元素是第二列卡片高度的数组,依此类推。同样,您可以使用完整高度并让子组件设置卡片高度。
标签:
