在Web設計中，柵格系統是一個非常重要的概念，它可以幫助我們更好地實現網頁布局。在這篇文章中，我將介紹如何設置CSS柵格系統。 首先，我們需要定義柵格的寬度和間距。在下面的代碼中，我們將柵格的寬度設置為100%（即占用整個父容器的寬度），間距設置為20px：

.grid {
width: 100%;
margin-left: -20px;
margin-right: -20px;
display: flex;
flex-wrap: wrap;
}
.grid__item {
width: calc(25% - 20px);
margin: 20px;
}

在上面的代碼中，我們使用了Flexbox布局，在父容器（.grid）上設置了display: flex和flex-wrap: wrap屬性，這樣子元素就能夠根據需要自動換行了。而子元素（.grid__item）則通過設置寬度和margin值來控制自身的大小和間距。 在我們的柵格系統中，一行被分為了4個柵格，每個柵格的寬度為25%（因為我們一行有4個柵格）。由于我們在父容器上設置了margin-left和margin-right的值為-20px，所以子元素在被渲染時會將這個值“吃掉”，從而實現了20px的間距。 接著，我們可以在柵格中添加內容，如下所示：

<div class="grid"><div class="grid__item"><p>柵格1的內容</p></div><div class="grid__item"><p>柵格2的內容</p></div><div class="grid__item"><p>柵格3的內容</p></div><div class="grid__item"><p>柵格4的內容</p></div></div>

最后，我們可以在CSS中設置柵格的樣式，比如背景顏色、邊框樣式等：

.grid__item {
background-color: #f2f2f2;
border: 1px solid #ccc;
}

現在，一個簡單的CSS柵格系統就搭建完成了。當然，在實際的項目中，我們可能需要根據具體需求來進行更復雜的設置，比如響應式布局等。但是，以上代碼可以作為一個基礎的模板來幫助我們開始實現自己的柵格系統。