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栅栏模式可以让网页布局变得更加美观、灵活和自适应，是现代网页设计中不可缺少的一种技术。