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

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

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

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

上面的代碼中，我們?yōu)樽釉卦O(shè)置了 grid-column-start 和 grid-column-end 屬性來指定子元素所占用的列數(shù)，指定起始和結(jié)束位置。這里的子元素會占用第 2 列到第 4 列，占用第 1 行到第 3 行。

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

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

總之，使用網(wǎng)格布局可以讓我們更加方便地處理頁面的布局，使得頁面看起來更加整潔、簡潔。當(dāng)然，在處理一些復(fù)雜的布局時，需要更加細(xì)致的思考和計(jì)算才能實(shí)現(xiàn)最佳的效果。