CSS網格布局是一種用于創建網頁布局的強大技術。它可以使網頁布局更加精準，更加靈活，更加易于維護。下面我們來看看如何使用CSS實現網格布局。

/* 在 CSS 中創建網格布局需要使用 display: grid 或 display: inline-grid 屬性 */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px;
}
/* grid-template-columns 屬性可以定義網格布局中列的數量和寬度 */
/* grid-template-rows 屬性可以定義網格布局中行的數量和高度 */
.grid-item {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
/* 在網格布局中添加內容需要使用 grid-column 和 grid-row */
/* grid-column 屬性可以定義內容應該占用的列數 */
/* grid-row 屬性可以定義內容應該占用的行數 */
.item1 {
grid-column: 1 / 3;
}
.item2 {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.item3 {
grid-column: 3 / 4;
}
.item4 {
grid-column: 2 / 4;
}

如上所示，我們創建了一個網格容器（grid-container），該容器有三列和兩行。然后，我們給該容器添加了四個內容項（grid-item），每個項都有不同的網格位置。這樣，我們就可以通過 CSS 實現網格布局。