使用CSS Grid可直观创建多行多列布局。通过display: grid开启布局，用grid-template-columns和grid-template-rows定义行列结构，支持固定值、fr单位及repeat()函数简化重复设置，如repeat(3, 1fr)表示三等分列宽；结合minmax(200px, 1fr)与auto-fit实现响应式自适应列数，gap属性设置单元格间距。子元素自动填入网格无需额外定位，掌握核心属性即可快速构建灵活布局。
使用 CSS Grid 实现多行多列的网格布局非常直观且强大。只需要在容器上启用 grid 布局，并定义行列结构即可。
设置网格容器
要开启网格布局，需将父容器的 display 属性设为 grid 或 inline-grid。
grid 适用于块级容器，inline-grid 则让容器表现为内联元素。.container {
display: grid;
}定义行和列
通过 grid-template-columns 和 grid-template-rows 可以明确指定每列和每行的尺寸。
- grid-template-columns：定义列宽，支持固定值（如 100px）、弹性单位（fr）或 auto
- grid-template-rows：定义行高，用法与列相同
示例：创建一个 3 列 2 行的等宽网格
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三列均分空间 */
grid-template-rows: 100px 200px; /* 第一行高 100px，第二行 200px */
gap: 10px; /* 单元格之间的间距 */
}使用 repeat() 简化语法
当列或行数量较多且样式重复时，可用 repeat() 函数简化代码。
情感家园企业站5.0 多语言多风格版
下载
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 等同于 1fr 1fr 1fr */
grid-template-rows: repeat(2, 100px); /* 两行各 100px */
gap: 15px;
}还可以混合使用不同单位：
grid-template-columns: 100px repeat(2, 1fr); /* 第一列 100px，后两列均分剩余空间 */
自动填充与灵活响应
对于响应式设计，可结合 minmax() 与 auto-fit 或 auto-fill 实现自适应列数。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}这段代码表示：每列最小 200px，最大为 1fr，浏览器会根据容器宽度自动安排列数，适合移动端到桌面端的响应布局。
基本上就这些。只要掌握 display: grid、grid-template-columns/rows 和 gap，就能快速构建灵活的多行多列布局。不复杂但容易忽略细节，比如子元素会自动填入网格单元，无需额外定位。
