响应式项目网格
入门~12 分钟0/4 步骤
不写 CSS 的布局：用 Grid 排版
每个出色的作品集都需要一种清爽的方式来展示你的作品。经典的模式是项目卡片网格——整齐的行与列，随着屏幕尺寸变化自动重新排布。
过去这意味着与 float 和 clearfix 搏斗。现在呢？你只需描述你想要的效果——“三列等宽、留有间距”——Tailwind 的 grid 工具类会搞定其余部分。完全不需要写 CSS 文件。
在本课中，你将构建一个响应式项目网格：一个标题，加一个装着三张卡片的 grid 容器。学完后你会掌握 grid、grid-cols-3 和 gap——这三件你会反复用到的工具。
操作说明
1
在网格上方添加一个 h2 区块标题，让访客知道自己在看什么。
提示： 使用：`<h2 class="text-3xl font-bold mb-8 text-center">精选项目</h2>`
这段代码写在哪里？
<!-- 在这里搭建你的项目网格 -->写在第 12 行——在那条注释下方，接在你已经写好的代码后面。
2
使用 grid 创建一个网格容器 div，并在卡片之间留出间距。
3
让网格在中等及以上屏幕上显示三列等宽。
4
在网格内至少添加一张项目卡片：使用 article 元素，包含标题和描述。
你的代码
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
用 ViBot 来 Vibe0 / 12 条免费消息
描述你想为这一步构建的内容，我来编写代码——然后点击「应用」把它放进你的编辑器。 本步骤：在网格上方添加一个 h2 区块标题，让访客知道自己在看什么。
实时预览
实时预览