CSSGrid设置行列布局方法

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《CSS Grid如何设置行列布局》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

通过grid-template-columns和grid-template-rows定义网格行列，前者设置列宽如100px或fr比例，后者设置行高，可结合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学习网公众号，带你了解更多关于的知识点！