CSS柵格布局是一種常用的頁面布局方式，可以讓網頁在不同的設備和屏幕尺寸下保持良好的排版和顯示效果。它使用一個網格系統，將頁面分為若干列和行，同時使用CSS的樣式來控制不同區域的表現。

.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
grid-gap: 20px;
}
.box1 {
grid-column: 1 / span 6;
grid-row: 1;
}
.box2 {
grid-column: 7 / span 6;
grid-row: 1;
}
.box3 {
grid-column: 1 / span 3;
grid-row: 2;
}
.box4 {
grid-column: 4 / span 3;
grid-row: 2;
}
.box5 {
grid-column: 7 / span 6;
grid-row: 2;
}

在上面的代碼中，我們首先定義了一個名為container的網格容器，使用了display: grid來表示這是一個網格布局。接著使用grid-template-columns和grid-template-rows屬性定義了網格的列數和行數，這里多使用repeat函數和1fr單位，表示平均分配每一列的寬度。grid-gap屬性用來定義各個網格項目之間的距離。

同時我們再定義5個盒子，分別是box1、box2、box3、box4和box5。通過grid-column和grid-row屬性指定了每個盒子所占據的列和行數。例如box1占據第一列的6個網格單元格，而box3只占據第一列的3個網格單元格。這樣就可以實現不同大小的網格項目的布局。

總的來說，CSS柵格布局能夠讓頁面呈現出更加整潔美觀的效果，并且在不同設備上的顯示效果也能更好地適配和表現，是一個非常實用和常見的頁面布局方法。