CSSGrid多行多列布局详解

**CSS Grid多行多列布局教程：轻松掌握网页排版新技巧** 还在为复杂的网页布局发愁？本教程带你快速入门CSS Grid布局，利用`display: grid`轻松创建强大的多行多列结构。通过定义`grid-template-columns`和`grid-template-rows`，精确控制行列尺寸；使用`fr`单位和`repeat()`函数简化代码，实现等分布局；利用`gap`属性设置元素间距，提升页面美观度。此外，还将学习如何使用`grid-column`和`grid-row`控制项目跨列跨行，以及结合`minmax()`与`auto-fit`实现响应式自适应布局，让你的网页在各种设备上都能完美呈现。掌握CSS Grid，告别传统布局的繁琐，提升网页开发效率！

答案：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）单位让代码更简洁。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列，每列占 1 份 */
  grid-template-rows: repeat(2, 100px);  /* 两行，每行 100px 高 */
  gap: 10px; /* 设置行列间距 */
}

fr 单位会根据剩余空间自动分配，适合响应式设计。

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 间距和跨行跨列控制，就能灵活实现各种多行多列布局。

好了，本文到此结束，带大家了解了《CSSGrid多行多列布局详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！