屬性

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，第二列占剩余空間 */
}