CSS柵格式布局是一種基于柵格設計理念的網頁布局方式。它采用了行列式的方式來組織網頁中各個部分的位置和大小，并且采用了CSS技術來實現布局的效果。下面是CSS柵格式布局的原理。
在CSS柵格式布局中，我們首先需要定義一個根元素，通常是html元素或body元素。然后我們可以使用display屬性來設置根元素為一個柵格式布局容器。例如，如果我們想要使用12列的柵格式布局，可以如下設置根元素的CSS屬性：

html,
body {
height: 100%;
}
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
padding: 20px;
}

上述代碼中，我們設置了一個名為.container的元素作為柵格式布局的容器。我們使用了display:grid來定義該元素為柵格式布局容器，并且使用了grid-template-columns屬性來指定該容器的列數。其中，repeat()函數表示重復n次某一個值，1fr表示容器寬度的分數比例，這里我們使用了12個1fr來定義12列柵格式布局，每一列的寬度將平均分配。我們還設置了grid-gap屬性來指定每一列之間的間隔距離。
接下來，我們可以在柵格式布局中添加網格項，這些網格項可以在容器中任意排列。例如，我們可以定義一個類名為.itemA的元素，并且設置其在柵格式布局容器中的位置和大小：

.itemA {
grid-row: 1 / span 2;
grid-column: 1 / span 3;
}

上述代碼中，我們使用了grid-row屬性來指定.itemA元素跨越了第一行和第二行，使用了grid-column屬性來指定.itemA元素跨越了第一列、第二列和第三列。通過這樣的設置，我們可以讓.itemA元素占據柵格式布局容器中的一個矩形區域，從而實現布局效果。
總之，CSS柵格式布局是一種靈活、高效的網頁布局方式，它采用了行列式的布局方式，可以方便地實現多種網頁布局效果。在實際使用中，我們可以根據具體的需求選擇不同的柵格式布局方式，以達到最佳的布局效果。