CSS3的display屬性提供了許多強(qiáng)大的布局方式，其中display:grid是其中最具有表現(xiàn)力的一種方式。使用grid布局，可以輕松地實現(xiàn)復(fù)雜的網(wǎng)格系統(tǒng)。

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px;
}
.item1 {
grid-column: 1 / 3;
grid-row: 1;
}
.item2 {
grid-column: 2 / 4;
grid-row: 2 / 4;
}
.item3 {
grid-column: 1;
grid-row: 2;
}
.item4 {
grid-column: 3;
grid-row: 2;
}
.item5 {
grid-column: 1 / 4;
grid-row: 3;
}

如上所示，我們在一個名為.container的元素上應(yīng)用了grid布局。通過grid-template-columns和grid-template-rows屬性，我們定義了網(wǎng)格的列數(shù)和行數(shù)，并且通過單位fr實現(xiàn)了自適應(yīng)的網(wǎng)格。此外，我們還定義了網(wǎng)格之間的間距。

在每個子元素上，我們可以使用grid-column和grid-row屬性定義其位置和大小。例如，.item1跨度了第一列和第二列，占用了整個第一行。而.item2跨度了第二列和第三列，占用了第二行和第三行。

總結(jié)來說，display:grid是一個強(qiáng)大的布局方式，可以很容易地實現(xiàn)復(fù)雜的網(wǎng)格系統(tǒng)。我們可以使用grid-template-columns和grid-template-rows屬性定義網(wǎng)格，并通過grid-column和grid-row屬性定義每個子元素的位置和大小。