CSS柵格系統是一種設計響應式網頁的有效方法，它可以幫助我們在不同屏幕大小和設備上提供最佳的用戶體驗。下面是一個簡單的CSS柵格布局示例，您可以通過實踐來使用它：

.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
width: 25%;
padding: 10px;
box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.box {
width: 50%;
}
}
@media screen and (max-width: 480px) {
.box {
width: 100%;
}
}

我們首先定義一個整體容器，其中包含若干個呈現為平方的盒子。在這個示例中，我們使用了flexbox布局，使所有的子元素可以自動縮小或擴大以適應屏幕大小。接下來，我們給每個盒子設定了一個寬度，并將padding以box-sizing的方式進行盒模型計算，以避免盒子大小變化帶來的不可控問題。

隨后，我們使用媒體查詢@media來設置不同屏幕大小下的盒子寬度。在大于768px的屏幕上，我們讓每個盒子占據整個容器的四分之一，而在小屏幕（小于768px）上，每個盒子的寬度將縮減為50%。在小于480px的屏幕上，我們把盒子的寬度設為100%，以完全適應移動設備等小尺寸屏幕。

通過這種方式，我們可以輕松地實現一個簡單的響應式柵格布局，使我們的網站能夠自適應不同的屏幕大小。對于更復雜的布局，可以使用CSS框架，例如Bootstrap或Foundation，來加快開發，并提供更多的組件和模板，以便您在不同設備和瀏覽器上提供一致的用戶體驗。