CSS3 Grid布局是一種用于網頁設計的CSS布局模式。它可以將頁面劃分為幾個區域，然后在這些區域內定位網頁元素。CSS3 Grid布局提供了更為靈活的控制網頁布局的方式，可以使網頁設計更加方便和自由。

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; 
grid-template-rows: 100px 200px 100px;
grid-gap: 20px;
justify-items: center;
align-items: center;
}

在上面的代碼中，我們使用了CSS3 Grid布局來設計了一個容器，它被切分為3列和3行。其中，每個行和列的大小可以使用像素或百分比來定義。而grid-gap參數可以定義網格之間的間隙。這里我們將每個元素放置在網格的中心位置，以便我們的網頁元素顯示在稍微中心的位置。

使用CSS3 Grid布局時，我們可以使用grid-column和grid-row屬性來指定每個元素所占的網格范圍。例如:

.item1 {
grid-column: 1 / 3;
grid-row: 2 / 4;
}

上面的代碼指定了一個元素（類.item1）占據2個列和2個行，開始于第1列和第2行的位置。這使得元素覆蓋了第1和第2列的區域以及第2和第3行的區域。

綜上所述，CSS3 Grid布局提供了更靈活和自由的方式來控制網頁布局，并且可以輕松地指定每個元素所占據的位置。在網頁設計中使用CSS3 Grid布局可以讓設計師更有效率，更容易地創建復雜的網頁設計。