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 行的网格布局，常用于页面整体结构设计，如头部、主体、底部搭配侧边栏或主内容区。

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