CSS百分比柵格是一種用于響應式網頁設計的方法，它通過將HTML頁面劃分成幾個等寬的欄目，然后在每個欄目中添加不同的內容從而實現網頁布局。在這種布局中，使用百分比來設置欄目的寬度，以便使網頁能夠適應不同的屏幕尺寸。

.container{
width: 100%;
max-width: 1200px;
display: flex;
flex-wrap: wrap;
}
.col{
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 20px;
}
@media screen and (min-width: 768px){
.col{
width: 50%;
max-width: 50%;
}
}
@media screen and (min-width: 1200px){
.col{
width: 33.33%;
max-width: 33.33%;
}
}

在上面的代碼中，我們首先創建一個包含所有柵格列的容器，并將其最大寬度設置為1200像素。然后，我們定義一個欄目的樣式，其中包括設置其寬度為100%以及設置內邊距的行為盒模型。在媒體查詢部分，我們使用@media規則來調整欄目的寬度。當屏幕寬度大于768像素時，欄目寬度為50%，最大寬度也是50%。在1200像素以上的屏幕上，欄目寬度為33.33%，最大寬度也是33.33%。