什么是CSS網格？CSS網格是一種CSS布局模式，其中網頁的內容被劃分成若干行和列，然后在這些單元格中放置內容。

.wrapper {
display: grid; /* 使用grid屬性指定一個網格布局 */
grid-template-columns: 1fr 1fr 1fr; /* 指定三個等寬的列 */
grid-template-rows: 50px 100px; /* 指定兩行高度為50px和100px */
gap: 10px; /* 設置單元格之間的間距為10px */
}

在這個例子中，我們定義了一個名為“wrapper”的HTML元素，并賦予它一個CSS網格布局。通過使用“grid-template-columns”和“grid-template-rows”屬性，我們定義了一個擁有三列和兩行的網格。我們還通過“gap”屬性設置了單元格之間的間距。

在CSS網格中，夫元素被分割成多個行和列，我們可以通過指定子元素的屬性來確定它們在哪個單元格中。

.box {
grid-row: 1 / 2; /* 指定該元素跨越第一行到第二行 */
grid-column: 2 / 3; /* 指定該元素跨越第二列到第三列 */
}

在這個例子中，我們定義了一個名為“box”的HTML元素，并使用“grid-row”和“grid-column”屬性指定了它應該出現在哪個單元格中。在上述情況下，“box”元素占據了第一行和第二行之間的第二列和第三列。

在CSS網格布局中，所有子元素都應該定位在行和列的交叉點處。

.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.box {
grid-column: 1 / 3; /* 跨越兩列 */
}
.header {
grid-row: 1 / span 2; /* 跨越兩行 */
}

在這里，我們定義了一個名為“header”的HTML元素，并使用“grid-row”屬性將它定位在第一行和第二行之間。我們還定義了一個名為“box”的HTML元素，并使用“grid-column”屬性將它定位在第一列和第二列之間。請注意，我們可以使用“span”關鍵字通過一個屬性跨越多個單元格。