CSS柵欄模式是一種流行的網頁布局技術，它可以將網頁劃分為若干列，每列的寬度和位置都可以自定義。CSS柵欄模式基于CSS3的Flexbox布局屬性實現，讓網頁的布局變得更加靈活、自適應。

/* 定義柵欄容器 */
.container {
display: flex;
flex-wrap: wrap;
}
/* 定義柵欄項目 */
.item {
flex-grow: 1;
flex-basis: calc(100% / 3); /* 每行3個 */
margin: 10px;
}
/* 媒體查詢實現響應式布局 */
@media screen and (max-width: 768px) {
.item {
flex-basis: calc(100% / 2); /* 每行2個 */
}
}

如上述代碼所示，我們首先定義了一個柵欄容器，使用Flexbox布局屬性將子元素排列為一排。然后定義了柵欄項目，其中flex-grow屬性設置為1，可以使得項目自動填滿所在的容器。flex-basis屬性是控制每個柵欄項目的寬度，可以根據需要進行調整。margin屬性用于設置每個柵欄項目之間的間距。

柵欄模式還支持響應式布局，通過媒體查詢可以在不同設備和屏幕尺寸下自動適應布局。例如上述代碼中我們定義了當屏幕寬度小于768px時，每行只顯示2個柵欄項目，而不是默認的3個。

使用CSS柵欄模式可以讓網頁布局變得更加美觀、靈活和自適應，是現代網頁設計中不可缺少的一種技術。