CSS格子模型框架是一種基于CSS的網格系統，它允許開發者按照網格布局的方式創建網頁設計。格子模型框架能夠使網頁的布局更加系列化，使得設計更加清晰明了。下面我們來介紹一下常用的網格布局框架。

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media only screen and (max-width: 768px) {
.container{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}

以上是一個基于Grid布局的網格框架示例，它使用了container類來定義一個區域，內部包含了三列。我們使用repeat(3, 1fr)表示重復3次1fraction（即1份，這樣的意思是3列大小相同），同時使用gap來設置間隙。

同時我們使用了媒體查詢@media，這樣可以使框架在不同寬度下有不同的設計方案。例如在移動端，我們將布局變為雙列。其他的網格框架也可以使用類似的方式來適應不同的屏幕寬度。

.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media only screen and (max-width: 768px) {
.container{
display: flex;
flex-direction: column;
}
}

以上是一個基于Flex布局的網格框架示例，它使用了container類來定義一個區域，內部使用了flex布局，使它可以適應不同的設備。

使用justify-content: space-between來定義不同元素之間的間隙，同時，使用@media媒體查詢，我們將布局變為垂直方向，使得在移動端更加友好。

綜上所述，CSS格子模型框架可以幫助我們更快速地布局設計，使得我們的網站更加美觀可觀。以上兩個框架分別使用了Grid和Flex布局，這兩種布局都有它們自己的優點。在實際的開發過程中，我們應該靈活運用，根據項目需求來選擇最適合的布局方式。