CSS Grid是CSS中最新的布局模塊。其功能非常強大，可用于創建復雜的網格布局。

與傳統的網格系統不同，CSS網格布局允許創建任意數量的列和行。這使得它更加靈活且可適應各種設備和屏幕大小。

現在，CSS網格布局已經得到了廣泛的支持，并且成為前端開發人員重要的技能之一。

/* 基本網格結構 */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}
.item {
background-color: #eee;
padding: 20px;
}
.item1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.item2 {
grid-column: 2 / 4;
grid-row: 2 / 4;
}
.item3 {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item4 {
grid-column: 3 / 4;
grid-row: 3 / 4;
}

上面的代碼是一個基本的網格結構。在.container類中，我們定義了一個3列x 3行的網格，并為每個單元格指定了高度和寬度。我們還定義了單元格之間的間距。

在.item類中，我們定義了單元格的樣式。同時，我們還為每個單元格設置了位置。

例如，.item1使用了grid-column和grid-row屬性將其放置在第1列和第1行。item2跨越了第2和第3列，并跨越第2到第4行。

使用CSS網格布局，我們可以輕松地創建復雜的布局，并實現響應式設計。它是現代網頁設計中不可或缺的技術。