CSS3 柵欄出現后，網頁布局的多樣化程度得到了很大提升。柵欄布局是一種通過將頁面分割成多個列和行的網格來實現的網頁布局方式，CSS3 柵欄布局可以輕松實現此類布局。

在 CSS3 柵欄中，我們可以使用“網格容器”和“網格項”來進行布局。網格容器是指使用display: grid樣式的容器元素，而網格項則是放置在網格容器中的子元素。接下來，我們可以為網格容器設置幾個屬性，例如grid-template-columns，grid-template-rows以及grid-gap。

/* 設置網格容器 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 將網格分為3列，每列寬度均分為1fr */
grid-template-rows: 100px auto 200px; /* 第一行高度為100px，第二行自適應高度，第三行高度為200px */
grid-gap: 10px; /* 網格之間的間距為10px */
}
/* 設置網格項 */
.grid-item {
grid-column: 1 / 4; /* 網格項跨越3列 */
grid-row: 2; /* 網格項占據第2行 */
}

實際應用中，我們可以使用 CSS3 柵欄來實現自適應網頁布局、響應式布局等效果，使得網頁在不同尺寸設備上都能有更好的展示效果。