網格布局是一種比傳統的基于盒模型布局更靈活的方式。使用網格布局，可以讓頁面的布局更加高效、靈活、簡單。下面我們來介紹一下CSS網格布局。

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}

上面的代碼中，我們首先給容器設置了 display: grid，這樣我們就可以開始使用網格布局了。接著，我們使用 grid-template-columns 屬性來指定列數，使用 grid-template-rows 屬性來指定行數，如上面的代碼所示，我們設置了三列和三行。此外，我們還設置了列和行之間的間隔為 10px，這個間隔可以通過 grid-gap 屬性來實現。

.child {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}

上面的代碼中，我們為子元素設置了 grid-column-start 和 grid-column-end 屬性來指定子元素所占用的列數，指定起始和結束位置。這里的子元素會占用第 2 列到第 4 列，占用第 1 行到第 3 行。

@media (max-width: 600px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}

上面的代碼中，我們使用媒體查詢來適配移動設備，當頁面寬度小于 600px 時，我們重新定義了容器的列和行數，將列數設置為 1，將行數設置為 auto，這樣可以讓子元素垂直方向上自適應高度。

總之，使用網格布局可以讓我們更加方便地處理頁面的布局，使得頁面看起來更加整潔、簡潔。當然，在處理一些復雜的布局時，需要更加細致的思考和計算才能實現最佳的效果。