CSS是層疊樣式表，它可以用來(lái)控制HTML頁(yè)面的樣式。在網(wǎng)頁(yè)布局中，我們經(jīng)常需要使用格子布局。這種布局方法可以很好地控制網(wǎng)頁(yè)內(nèi)容的排版。

/*HTML*/
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
/*CSS*/
.container{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.box{
background: #f2f2f2;
padding: 10px;
}

上面的代碼演示了如何使用CSS實(shí)現(xiàn)格子布局。在container類中，我們?cè)O(shè)置display為grid，并設(shè)置grid-template-columns為repeat(2, 1fr)。這表示我們將整個(gè)容器分割成兩列，每一列的寬度為1fr。

而在box類中，我們?cè)O(shè)置了背景和內(nèi)邊距。這樣所有的box都有了相同的背景和內(nèi)邊距，從而更好地體現(xiàn)出網(wǎng)頁(yè)布局的整體性。

除此之外，我們還可以通過(guò)grid-row和grid-column屬性來(lái)控制每一個(gè)box的位置。例如：

.box:nth-child(1){
grid-row: 1 / span 2;
}
.box:nth-child(2){
grid-column: 2 / span 2;
}

上面的代碼將第一個(gè)box跨越了兩個(gè)行，而將第二個(gè)box跨越了兩個(gè)列。

綜上所述，CSS可以很方便地實(shí)現(xiàn)網(wǎng)頁(yè)的格子布局，并且我們還可以通過(guò)使用grid-row和grid-column屬性來(lái)實(shí)現(xiàn)更加細(xì)致的控制。無(wú)論是移動(dòng)端還是PC端，使用格子布局都是一種有用而實(shí)用的網(wǎng)頁(yè)排版方法。