CSS3是CSS的升級版，它提供了更多的新特性，其中一個重要的特性就是網(wǎng)頁布局。下面就來介紹一下CSS3的網(wǎng)頁布局。

.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 20px;
}
.item {
background-color: #ccc;
padding: 20px;
}
@media only screen and (max-width: 768px) {
.container {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}

在CSS3中，我們可以使用grid布局。它可以將頁面劃分為一個個網(wǎng)格，然后可以通過指定每個網(wǎng)格的大小和位置來完成布局。以上代碼就是一個簡單的grid布局，container是網(wǎng)格容器，item是網(wǎng)格項，grid-template-columns指定了兩列，并且第一列的大小是第二列大小的一半，grid-gap指定了網(wǎng)格之間的間隔。

同時，使用CSS3還可以實現(xiàn)響應(yīng)式布局。通過@media媒體查詢，我們可以指定在不同的屏幕尺寸下應(yīng)該如何布局。以上代碼中@media只會在屏幕寬度小于768px時生效，它指定了在小屏幕下，容器中的網(wǎng)格應(yīng)該按照一定規(guī)則自動調(diào)整大小和位置。