答案：CSS Grid 通过 display: grid 创建二维布局，定义 grid-template-columns 和 grid-template-rows 设置行列结构，使用 fr 单位和 repeat() 简化等分布局，配合 gap 设置间距，利用 grid-column 和 grid-row 控制项目跨列跨行，结合 minmax() 与 auto-fit 实现响应式自适应，适用于复杂多行多列页面设计。
使用 CSS Grid 实现多行多列布局非常直观且强大。只需要在容器上启用 Grid 布局，并定义行和列的结构，就能轻松创建复杂的二维布局。
1. 定义 Grid 容器和基本结构
要开启 Grid 布局，先将父元素设置为 display: grid，然后通过 grid-template-columns 和 grid-template-rows 定义列宽和行高。
例如：
.container { display: grid; grid-template-columns: 100px 200px 150px; /* 三列，宽度分别为 100px, 200px, 150px */ grid-template-rows: 50px 80px; /* 两行，高度分别为 50px, 80px */}
这样就创建了一个 3 列 2 行的网格，共 6 个单元格，子元素会按顺序自动填入。
2. 使用 repeat() 和 fr 单位简化定义
对于等分或重复结构，可以用 repeat() 函数和 fr（fraction）单位让代码更简洁。
立即学习“前端免费学习笔记（深入）”；
比如创建一个 3 列等宽、自动换行的布局：
.container { display: grid; grid-template-columns: repeat(3, 1fr); /* 三列，每列占 1 份 */ grid-template-rows: repeat(2, 100px); /* 两行，每行 100px 高 */ gap: 10px; /* 设置行列间距 */}
fr 单位会根据剩余空间自动分配，适合响应式设计。
Remove.bg
AI在线抠图软件，图片去除背景
174 查看详情
3. 控制项目位置与跨行列
Grid 允许子元素跨越多行或多列，使用 grid-column 和 grid-row 指定起始和结束线。
示例：让第一个项目横跨两列：
.item:first-child { grid-column: 1 / 3; /* 从第1线到第3线，即跨2列 */ grid-row: 1 / 2; /* 占据第一行 */}
也可以用 span 关键字简写：
.item:first-child { grid-column: span 2; /* 向右跨2列 */}
4. 自动填充与响应式布局
结合 minmax() 和 auto-fit 或 auto-fill，可以让网格自动适应容器宽度。
实现一个自适应卡片布局：
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;}
浏览器会尽可能放入宽度至少 200px 的列，每列等宽并填满容器，非常适合移动端适配。
基本上就这些。Grid 的核心是容器定义结构，项目自动或手动定位。掌握模板定义、fr 单位、gap 间距和跨行跨列控制，就能灵活实现各种多行多列布局。
以上就是如何通过css Grid实现多行多列布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/992383.html
微信扫一扫 
支付宝扫一扫 
