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 实现多行多列布局非常直观且强大。只需要在容器上启用 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学习网公众号！