CSSGrid多行多列布局详解

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《CSS Grid多行多列布局教程》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

使用CSS Grid可直观创建多行多列布局。通过display: grid开启布局，用grid-template-columns和grid-template-rows定义行列结构，支持固定值、fr单位及repeat()函数简化重复设置，如repeat(3, 1fr)表示三等分列宽；结合minmax(200px, 1fr)与auto-fit实现响应式自适应列数，gap属性设置单元格间距。子元素自动填入网格无需额外定位，掌握核心属性即可快速构建灵活布局。

使用 CSS Grid 实现多行多列的网格布局非常直观且强大。只需要在容器上启用 grid 布局，并定义行列结构即可。

设置网格容器

要开启网格布局，需将父容器的 display 属性设为 grid 或 inline-grid。

.container {
  display: grid;
}

定义行和列

通过 grid-template-columns 和 grid-template-rows 可以明确指定每列和每行的尺寸。

• grid-template-columns：定义列宽，支持固定值（如 100px）、弹性单位（fr）或 auto
• grid-template-rows：定义行高，用法与列相同

示例：创建一个 3 列 2 行的等宽网格

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三列均分空间 */
  grid-template-rows: 100px 200px;    /* 第一行高 100px，第二行 200px */
  gap: 10px; /* 单元格之间的间距 */
}

使用 repeat() 简化语法

当列或行数量较多且样式重复时，可用 repeat() 函数简化代码。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 等同于 1fr 1fr 1fr */
  grid-template-rows: repeat(2, 100px);  /* 两行各 100px */
  gap: 15px;
}

还可以混合使用不同单位：

grid-template-columns: 100px repeat(2, 1fr); /* 第一列 100px，后两列均分剩余空间 */

自动填充与灵活响应

对于响应式设计，可结合 minmax() 与 auto-fit 或 auto-fill 实现自适应列数。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

这段代码表示：每列最小 200px，最大为 1fr，浏览器会根据容器宽度自动安排列数，适合移动端到桌面端的响应布局。

基本上就这些。只要掌握 display: grid、grid-template-columns/rows 和 gap，就能快速构建灵活的多行多列布局。不复杂但容易忽略细节，比如子元素会自动填入网格单元，无需额外定位。

以上就是《CSSGrid多行多列布局详解》的详细内容，更多关于的资料请关注golang学习网公众号！