CSSGrid设置行列布局方法详解

想轻松构建响应式、结构清晰的网页布局？CSS Grid 的核心秘诀就在于 `grid-template-columns` 和 `grid-template-rows` 这两个属性——它们让你用简洁的代码精准定义列宽与行高，无论是固定像素、弹性比例（如 `1fr 2fr`），还是借助 `repeat()` 快速生成重复结构，都能随心掌控；配合使用，瞬间搭建出头部-主体-侧栏-底部等复杂页面骨架，真正实现“所想即所得”的现代布局体验。

在 CSS Grid 布局中，定义网格的行和列主要通过 grid-template-columns 和 grid-template-rows 属性来实现。它们用于明确指定网格容器中每一列的宽度和每一行的高度。

定义网格列（grid-template-columns）

使用 grid-template-columns 可以设置网格中各列的宽度。可以传入一个值列表，每个值对应一列的尺寸。

• grid-template-columns: 100px 200px 150px; — 创建三列，宽度分别为 100px、200px、150px。
• grid-template-columns: 1fr 2fr; — 创建两列，按比例分配可用空间，第一列占1份，第二列占2份。
• grid-template-columns: repeat(3, 1fr); — 快速创建三列，每列均分空间。

定义网格行（grid-template-rows）

grid-template-rows 用来设置每一行的高度，语法与列类似。

• grid-template-rows: 50px 100px; — 创建两行，高度分别为 50px 和 100px。
• grid-template-rows: repeat(2, auto); — 创建两行，高度由内容自动决定。
• grid-template-rows: 100px 1fr; — 第一行固定高度，第二行填充剩余空间。

结合使用行列定义

在一个网格容器中，同时设置行和列即可形成完整的网格结构。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 60px 1fr 50px;
}

这会创建一个 2 列 3 行的网格布局，常用于页面整体结构设计，如头部、主体、底部搭配侧边栏或主内容区。

基本上就这些，掌握这两个属性就能灵活控制网格的基本结构。

理论要掌握，实操不能落！以上关于《CSSGrid设置行列布局方法详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！