CSS中的柵格系統是一種常用的設置頁面布局的方法，可以讓頁面的排版更加整齊美觀。在設置柵格特效時，我們可以使用以下幾個步驟：

// 設置柵格容器
.container {
display: flex;
flex-wrap: wrap;
}
// 設置柵格項
.item {
flex-basis: 20%;
/* 
該屬性指定了柵格項的基礎寬度，
如果想要更多列，則將百分比值適當縮小
*/
padding: 10px;
}
// 設置柵格間隔
.item:not(:last-child) {
margin-right: 20px;
/* 
該屬性指定了柵格項之間的間隔，
可根據實際需求調整大小 
*/
}

通過上述設置，我們可以創建一個包含多列等寬柵格的布局。如果想要設置不同寬度的柵格項，則需要通過設置相應的flex-basis值來實現。例如，以下代碼將創建一個包含兩列不等寬柵格的布局：

.container {
display: flex;
flex-wrap: wrap;
}
.item-1 {
flex-basis: 60%;
padding: 10px;
}
.item-2 {
flex-basis: 40%;
padding: 10px;
}

在柵格系統中，還可以使用媒體查詢來根據不同的設備屏幕尺寸設置不同的柵格布局，以滿足響應式設計的需求。例如，以下代碼將創建一個在大屏幕上顯示四列柵格，在小屏幕上顯示兩列柵格的布局：

@media screen and (min-width: 768px) {
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: 25%;
padding: 10px;
}
}
@media screen and (max-width: 767px) {
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: 50%;
padding: 10px;
}
}

通過以上步驟，我們可以輕松地實現柵格特效，讓頁面排版更加美觀、整潔。