使用 CSS grid 构建 bento 布局

Build a bento layout with CSS grid (featured image)

There’s a lot of discussion happening around whether masonry is needed in CSS. And this discussion brings in things like bento grids. It inspired me to create a bento grid using today’s CSS grid and @container queries.

关于 CSS 是否需要 masonry 的讨论很多。这场讨论也引入了 bento grids 等概念。它启发我使用今天的 CSS grid 和 @container 查询创建一个 bento grid。

For this example masonry isn’t required—but it’s something I would like to see part of CSS in whatever way it ends up being.

在此示例中，masonry 并非必需——但我希望无论最终如何实现，它都能成为 CSS 的一部分。

I make the assumption that you’re comfortable setting up Tailwind for your project
我假设你已经熟悉如何在项目中配置 Tailwind

The bento design

The design showcases a rough idea of an app I wish existed. Each section displays a different feature with larger sections having an illustration of the feature.

该设计展示了一个我希望存在的应用的粗略构想。每个区块展示不同的功能，较大的区块配有该功能的插图。

A compact grid showing 6 features of a fictional app. Layout will vary based on your device. This is a live demo.

一个紧凑的网格展示了虚构应用的 6 个功能。布局会根据你的设备而变化。这是一个实时演示。

Content spans different column widths
内容跨越不同的列宽
Icon plus title style in unpredictable width containers
图标加标题样式，在宽度不可预测的容器中
Rows with equal height content and imagery
行高相等的内容与图像行
Images will need to retain or change aspect ratio
图片需要保持或改变宽高比
Image masks will need to change with different image crops
图像遮罩需要随不同图像裁剪而调整

Project files

项目文件

The design is available through Figma’s community and the code is available through Github. There’s two layout options in both.

该设计可通过 Figma 社区获取，代码可通过 Github 获取。两者都提供了两种布局选项。

HTML structure

HTML 结构

First, it’s necessary to get the structure of the bento grid. Then it makes sense to cover the rest of the layout and visual style with Tailwind.

首先，需要搭建 bento 网格的结构；接着再用 Tailwind 完成其余布局和视觉样式才有意义。

Create a container

创建容器

Everything needs to be contained within a <div> with this you’ll apply the grid styles to it.

所有内容都需要包含在一个 <div> 中，然后你就可以对它应用网格样式。

<section>
 <header>
 <h2>Publish from anywhere with your frontmatter blog</h2>
 <p>Why should you be left out of a cross device writing experience because you’re...