Softonic

CSS Grid 生成器

步 1 / 3
下一步

CSS Grid 是构建二维布局的标准方式，但容器的语法很容易忘记。这个生成器替你写出容器规则：固定数量的等宽列、轨道之间的间距，以及低于最小宽度时切换为 auto-fit 列的媒体查询，让布局在小屏幕上依然清晰可读。输出是纯粹的容器 CSS；元素的放置由你自己的样式表负责。

如何构建网格

  1. 1

    设置列数

    1 到 12 个等宽轨道。

  2. 2

    设置列的最小宽度

    低于此宽度时网格切换为 auto-fit，让每列保持一个可用的最小尺寸。

  3. 3

    设置间距

    列与行之间的空隙。

  4. 4

    生成 CSS

    工具会写出容器规则以及响应式回退。

  5. 5

    复制代码

    把容器规则粘贴到样式表中，并用你自己的 `grid-column` / `grid-row` 规则放置元素。

生成的容器

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
  • repeat(3, minmax(0, 1fr))：三列平分可用宽度。1fr 是剩余空间的一份；minmax(0, 1fr) 允许列缩小到内容尺寸以下。
  • gap：每个轨道之间的间距。
  • 媒体查询切换为 repeat(auto-fit, minmax(220px, 1fr))，即尽量多创建列，每列至少 220px 宽。断点是列数乘以最小宽度（下限 120px），因此小屏幕上网格会换行而不是被挤压。

fr 单位

fr 表示“剩余空间的一份“：扣除固定尺寸的轨道后，剩余空间按 fr 单位总数均分。

grid-template-columns: 200px 1fr 2fr;

在 1000px 的容器中，第一列占 200px，其余 800px 按 1:2 分配，即 267px 和 533px。

auto-fill 与 auto-fit

  • auto-fill：元素不足时创建空的占位轨道。
  • auto-fit：把空轨道折叠为零，剩余元素拉伸填满整行。

响应式回退使用 auto-fit，这正是卡片网格想要的：行看起来总是满的。

不同宽度的列

生成器输出等宽列。修改结果即可混合尺寸：grid-template-columns: 200px 1fr 2fr; 得到固定侧栏和按 1:2 分配的两个弹性列。命名区域（grid-template-areas）或显式放置（grid-column: 1 / 3）等规则，请在生成的容器之上手动添加。

Grid 与 Flexbox

  • Grid：带轨道的显式二维布局。适合具有行与列结构的布局（页面骨架、画廊、仪表盘）。
  • Flexbox：沿单一轴的一维对齐。适合元素自然流动的场景（导航栏、按钮行）。

实际布局通常两者结合：页面骨架用 Grid，组件内部用 Flexbox。

常见陷阱

  • 忘记给子元素设置 min-width: 0：网格项默认使用内容的最小宽度，这会让 fr 列无法缩到最长单词以下。给子元素设置 min-width: 0 让它们可以收缩。
  • 没有 display: grid 就嵌套：网格的子元素不会自动成为网格，除非你显式声明。

常见问题

它保护小屏幕上的布局。生成的媒体查询切换为 repeat(auto-fit, minmax(宽度, 1fr))，因此每列至少保持该宽度，网格会新增行而不是挤压列。

生成器输出等宽列。修改结果中的 grid-template-columns 行即可混合尺寸，例如 1fr 2fr 1fr 得到宽中列，200px 1fr 得到固定侧栏。

通常是因为网格项带有默认的 min-width: auto，它等于内容的最小宽度。给网格项设置 min-width: 0，它就能在单元格内收缩。

布局同时具有行与列结构时用 Grid（页面布局、照片墙、仪表盘）。元素沿单一轴流动时用 Flexbox（导航栏、按钮行、表单字段堆叠）。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

IBAN 验证工具

在本地检查 IBAN 的注册国家长度、国内结构和 MOD 97-10 校验位。不上传数据，也不表示账户真实存在。

JSON 转 Dart 工具

将 JSON 示例转换为空安全的 Dart 模型类，支持嵌套类型、fromJson、可选 toJson，并在浏览器中私密处理。

Luhn 算法校验工具

验证信用卡号、IMEI、SIN及其他受Luhn校验保护的号码。返回验证结果（通过或失败），并显示每个校验步骤及校验和计算过程。

此工具还提供其他语言版本