使用display: grid结合grid-template-columns和grid-template-rows定义网格，通过grid-column和grid-row控制子元素位置，配合gap设置间距，利用repeat()和minmax()实现响应式布局，适用于复杂页面排版。

要在CSS中实现Grid多行多列布局，核心是使用display: grid结合grid-template-rows和grid-template-columns来定义网格结构。通过合理划分行列，可以灵活控制页面元素的排列方式，适用于仪表盘、卡片列表、表单排版等复杂布局场景。

定义基本网格结构

使用grid-template-columns和grid-template-rows设置列宽和行高，形成固定或响应式网格框架。

例如：

• grid-template-columns: 1fr 2fr 1fr; —— 将容器分为三列，中间列是两侧的两倍宽
• grid-template-rows: 100px 50px auto; —— 定义三行，高度分别为100px、50px和自适应
• 可使用repeat()简化重复定义，如repeat(3, 1fr)表示三列等分

控制网格项目位置

通过grid-column和grid-row指定子元素跨越的行列范围，实现跨列或跨行布局。

常用写法：

• grid-column: 1 / 3; —— 从第1列开始，跨到第3列前（即占两列）
• grid-row: 2 / 4; —— 占用第2至第3行
• 也可使用span语法，如grid-column: span 2;表示向右跨越2列

使用隐式网格自动扩展

当内容超出预设行列时，Grid会自动创建隐式行或列。可通过grid-auto-rows和grid-auto-columns控制新增区域的尺寸。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

适用情况：

• 动态内容加载时保持统一行高
• 设置grid-auto-rows: 80px;让所有自动生成的行高度为80px
• 配合minmax()更灵活，如grid-auto-rows: minmax(60px, auto);

结合gap设置间距

使用gap属性在网格项之间添加间距，替代传统margin负值或复杂计算。

示例：

• gap: 10px; —— 统一设置行列间距
• row-gap: 15px; column-gap: 10px; —— 分别设置行距和列距
• gap不会影响网格容器边缘，布局更干净

基本上就这些。掌握行列定义、项目定位和间隙控制，就能高效构建复杂的多行多列布局。实际开发中建议结合开发者工具调试网格线编号，便于精准定位。