CSS柵格系統是用于網站布局的設計工具，可以將內容分成等寬的列，使整個頁面具有更好的可讀性、可訪問性、可維護性和美觀度。以下是制作CSS柵格的步驟。

/* 基本樣式 */
.row:after {
content: "";
display: block;
clear: both;
}
.col {
float: left;
box-sizing: border-box;
}
/* 柵格樣式 */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
/* 使用柵格 */
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4

以上是制作CSS柵格的基本步驟和代碼示例。在實際開發中，可以根據頁面的設計需要自定義柵格的寬度、間距等樣式，使頁面布局更加靈活和多樣化。