CSS柵格系統是一種非常有用的網頁布局工具，可以幫助我們更輕松地構建網頁布局，以適應不同設備尺寸的屏幕。

在柵格系統中，我們通常會將頁面分為若干個列，每列的寬度都是相等的。

.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 20px;
}
.grid-item {
grid-column: span 4;
}

在上面的代碼中，我們首先使用了display: grid;來定義一個網格布局容器。然后使用了grid-template-columns: repeat(12, 1fr);來指定我們將頁面分為12列，每列的寬度都是1fr。最后使用了grid-gap: 20px;來指定每個格子之間的間距為20像素。

接下來，我們使用grid-column: span 4;來定義一個占據4個格子寬度的元素（也就是一整行的四分之一寬度）。

通過這樣的方式，我們可以非常便捷地將頁面分為若干個等寬的列，從而實現響應式布局。