使用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控制新增区域的尺寸。
情感家园企业站5.0 多语言多风格版
下载
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
立即学习“前端免费学习笔记（深入）”；
适用情况：- 动态内容加载时保持统一行高
- 设置
grid-auto-rows: 80px;让所有自动生成的行高度为80px - 配合
minmax()更灵活，如grid-auto-rows: minmax(60px, auto);
结合gap设置间距
使用gap属性在网格项之间添加间距，替代传统margin负值或复杂计算。
-
gap: 10px;—— 统一设置行列间距 -
row-gap: 15px; column-gap: 10px;—— 分别设置行距和列距 - gap不会影响网格容器边缘，布局更干净
基本上就这些。掌握行列定义、项目定位和间隙控制，就能高效构建复杂的多行多列布局。实际开发中建议结合开发者工具调试网格线编号，便于精准定位。
