CSS3網(wǎng)格布局是CSS3中較新的版塊之一，它是一種強(qiáng)大的網(wǎng)頁布局模式。使用網(wǎng)格布局，可以輕松地創(chuàng)建現(xiàn)代、靈活且響應(yīng)式的網(wǎng)頁布局。

網(wǎng)格布局由網(wǎng)格容器、行、列、網(wǎng)格線、單元格等組成。

.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
.box {
background-color: #000080;
color: #fff;
padding: 10px;
}

在上面的代碼中，我們首先定義了一個名為.container的類，它是網(wǎng)格容器。然后我們使用display: grid將其定義為網(wǎng)格布局。接著使用grid-template-columns定義了三個相同寬度的列，使用grid-template-rows定義了兩個相同高度的行。

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 50px);
}

使用repeat()函數(shù)，我們可以更方便地定義重復(fù)的網(wǎng)格線。上面的代碼與之前的代碼是等效的。

接下來，我們可以在網(wǎng)格容器中創(chuàng)建網(wǎng)格單元格，可以使用grid-column-start、grid-column-end、grid-row-start、grid-row-end屬性來定義它們在行列中的位置。

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

上面的代碼中，我們定義了一個名為.box1的類，并將它的起始列設(shè)置為1、結(jié)束列設(shè)置為2、起始行設(shè)置為1、結(jié)束行設(shè)置為3。

除了使用數(shù)字定義位置之外，我們也可以使用關(guān)鍵詞來定義位置，如使用span屬性來指定單元格的跨列和跨行數(shù)量。

.box2 {
grid-column: 2 span 2;
grid-row: 1 / 3;
}

上面的代碼中，我們定義了一個名為.box2的類，并將它的起始列設(shè)置為2，跨2列，起始行設(shè)置為1，結(jié)束行設(shè)置為3。

最后，我們還可以使用grid-area屬性來同時設(shè)置四個位置屬性，還可以使用命名網(wǎng)格來定義單元格的位置。

.box3 {
grid-area: header;
}

上面的代碼中，我們定義了一個名為.box3的類，并將它的位置設(shè)置為網(wǎng)格中的header區(qū)域。

CSS3網(wǎng)格布局是一種靈活且具有很強(qiáng)的排版能力的網(wǎng)頁布局方式，對于需要響應(yīng)式和自適應(yīng)布局的網(wǎng)頁設(shè)計非常有用。