属性

1、grid-template-columns

用来定义 网格容器的列轨道（columns） 的尺寸和数量。它允许你设定网格的列布局，控制列的宽度和排列方式。

// 使用示例
// 你可以使用固定的长度单位来定义每一列的宽度。例如
1、grid-template-columns: 100px 200px 300px;// fr 是 CSS Grid 中的一个相对单位，表示容器宽度的一个比例。例如：
// 这表示容器宽度会被分成 4 份，第一列和第三列占 1 份，第二列占 2 份。
2、grid-template-columns: 1fr 2fr 1fr;// 这将创建两列，第一列宽度在 100px 到 300px 之间，第二列宽度在 150px 到 400px 之间。
3、grid-template-columns: minmax(100px, 300px) minmax(150px, 400px);// 这将创建 3 列，每列宽度为容器宽度的 1/3。
4、grid-template-columns: repeat(3, 1fr);// max-content：列宽度根据内容的最大尺寸来确定。
// min-content：列宽度根据内容的最小尺寸来确定。
// fit-content()：列宽度根据内容自动调整，但不超过指定的最大值。 例如：
5、grid-template-columns: max-content min-content fit-content(200px);

2、grid-auto-columns

grid-auto-columns 属性用于定义当网格容器中自动创建新列时，列的大小。换句话说，当网格项超出已定义的列轨道（grid-template-columns）时，grid-auto-columns控制自动添加的列的宽度。

// 使用示例// 这将使自动添加的列的宽度为200像素。
1、grid-auto-columns: 200px;// 这将使自动生成的列宽度为容器宽度的20%。
2、grid-auto-columns: 20%;// 这表示每个自动生成的列的宽度将在100px到300px之间，根据可用空间自动调整。
3、grid-auto-columns: minmax(100px, 300px);// 这样会使自动生成的列宽度等于内容的最大宽度。
4、grid-auto-columns: max-content;// 这样会使自动生成的列宽度等于内容的最小宽度。
5、grid-auto-columns: min-content;// 这将使自动生成的列宽度根据内容调整，但最大宽度为200px。
6、grid-auto-columns: fit-content(200px);

3、grid-template-rows

grid-template-rows 属性是用来定义 网格容器中行的高度 的，可以指定固定的值、相对比例、自动调整等方式。通过它，你可以灵活地设计网格布局，确保行的高度符合需求，或者根据内容自适应调整。

// 使用示例// 这将创建三个行，行高分别为 100px、200px 和 300px。
1、grid-template-rows: 100px 200px 300px;// 这将创建三个行，分别占容器总高度的 20%、30% 和 50%。
2、grid-template-rows: 20% 30% 50%;// 这表示容器高度会被分成 4 份，第一行和第三行占 1 份，第二行占 2 份。
3、grid-template-rows: 1fr 2fr 1fr;// 这将创建三个行，每一行的高度会根据其中内容的高度来自动调整。
4、grid-template-rows: auto auto auto;// 这将创建两行，第一行高度在 100px 到 300px 之间，第二行高度在 150px 到 400px 之间。
5、grid-template-rows: minmax(100px, 300px) minmax(150px, 400px);// 这将创建 3 行，每行的高度为容器高度的 1/3。
6、grid-template-rows: repeat(3, 1fr);// max-content：行高度根据内容的最大尺寸来确定。
// min-content：行高度根据内容的最小尺寸来确定。
// fit-content()：行高度根据内容自动调整，但不超过指定的最大值。 例如：
7、grid-template-rows: max-content min-content fit-content(200px);

4、grid-auto-rows

grid-auto-rows 是 CSS Grid 布局中的一个属性，用于定义 自动生成的行（grid items） 的高度。这些行是在 grid-template-rows 属性定义的行之外的额外行，即当网格容器中的项目超过了已定义的行数时，自动创建的行将使用这个属性来指定其高度。

// 使用示例// 这表示如果有额外的行被创建，它们的高度将会是 100px。
1、grid-auto-rows: 100px;// 这表示每一行的高度会根据内容的大小自动适应
2、grid-auto-rows: auto;// 这表示每个自动生成的行的高度将占容器剩余高度的相等部分。
3、grid-auto-rows: 1fr;// 这表示每个自动生成的行的高度会在 100px 和 200px 之间调整，具体高度取决于内容
4、grid-auto-rows: minmax(100px, 200px);// max-content：行高度根据内容的最大尺寸来确定。
// min-content：行高度根据内容的最小尺寸来确定。
// fit-content()：行高度根据内容自动调整，但不超过指定的最大值。
5、grid-auto-rows: max-content;

5、grid-row

设置跨度后，会影响网格项在垂直方向上的布局，控制它从起始行线开始，占据多少行的空间。它主要用于让单个网格项跨越多个行，而不是仅占据一个行。

可选值

• 数字：表示网格的行线（从 1 开始计数）。例如，1 表示网格的第一行线，2 表示第二行线，依此类推。
• span：关键字 span 表示跨越多少行。例如，span 2 表示从起始行开始，跨越 2 行。
• 负数：负数表示从最后一行线开始计数。例如，-1 表示最后一行线，-2 表示倒数第二行线。
• auto：表示自动计算，通常与其他值一起使用来自动适应网格项的尺寸。

// 使用示例// 这个例子表示该网格项从第二行线开始，跨越到第四行线（即跨越 2 行）。
.grid-item {grid-row: 2 / 4;
}// 这个例子表示该网格项从第一行开始，并且跨越 3 行（从第一行到第四行）。
.grid-item {grid-row: 1 / span 3;
}// 这个例子表示该网格项从倒数第三行线开始，直到倒数第一行线（即最后一行线）。
.grid-item {grid-row: -3 / -1;
}//在这个例子中，网格项的起始行是自动计算的，结束行是第三行线。
.grid-item {grid-row: auto / 3;
}

6、grid-column

grid-column 是 CSS Grid 布局中的一个属性，用于指定一个元素在网格（grid）中的列位置和跨越的列数。它可以控制元素从哪个列开始、跨越多少列

上面的·话总结就是合并列

grid-column: 1 / 3; 该元素从第 1 列开始，跨越到第 3 列，不包括第三列。
grid-column: span 2; 该元素从其默认位置开始，跨越 2 列。

7、grid-template-areas

用于在 CSS Grid 布局中定义网格的命名区域，使得在网格容器中对各个子元素的定位更加直观和易于管理。它允许你为网格的不同区域指定名称，并通过这些名称来布置网格项。

网格项的对齐方式

• justify-items：控制的是单个 网格项（Grid Item） 在各自单元格内的对齐方式。
• justify-content：控制的是整个 容器（Grid Container） 中项目在主轴方向上的对齐方式。

• justify-items：控制水平对齐。
• align-items：控制垂直对齐。
• justify-content：控制水平方向的对齐。
• align-content：控制垂直方向的对齐。
• place-items 是 justify-items 和 align-items 的简写。
• place-content 是 justify-content 和 align-content 的简写。

gird中函数的使用

1. repeat()

repeat() 是一个函数，用于简化重复设置网格行或列的定义。它可以用来创建多个相同大小的列或行，而不需要逐个列出每个值

repeat(count, size)count：表示重复的次数。
size：每个重复的列或行的大小。

2. minmax()

minmax() 是一个函数，用于设置网格行或列的大小范围，允许你定义一个最小值和最大值。这使得网格项的大小在该范围内动态调整，特别是在响应式设计中非常有用。

minmax(min, max)min：定义该行或列的最小尺寸。
max：定义该行或列的最大尺寸。// 示例
.container {display: grid;grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 最小100px，最大1fr的三列 */
}

3、fit-content()

fit-content() 是一个函数，它根据内容的大小来决定行或列的尺寸。它可以使列或行的大小适应其内容，最多可以扩展到指定的最大值。

fit-content(value)示例
.container {display: grid;grid-template-columns: fit-content(200px) 1fr; /* 第一列根据内容大小调整，最多200px，第二列占剩余空间 */
}