使用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() 函数简化代码。

序列猴子开放平台

具有长序列、多模态、单模型、大数据等特点的超大规模语言模型

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，就能快速构建灵活的多行多列布局。不复杂但容易忽略细节，比如子元素会自动填入网格单元，无需额外定位。

以上就是如何通过