CSS 柵格布局屬性是一種用于構(gòu)建響應(yīng)式頁面布局的技術(shù)，它的核心思想是將頁面分成若干列和行，形成一個網(wǎng)格，然后在網(wǎng)格中放置內(nèi)容。通過設(shè)置不同的列和行的寬度和高度，可以實現(xiàn)不同屏幕尺寸下的頁面布局效果。

柵格布局屬性最常用的就是

grid-template-columns

和

grid-template-rows

。其中，

grid-template-columns

定義了每一列的寬度，可以設(shè)置具體的數(shù)值或者使用百分比表示寬度；

grid-template-rows

則定義了每一行的高度。兩者可以配合使用，構(gòu)建出復雜的頁面。

.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 50px 100px 1fr;
}

上面的代碼定義了一個容器，該容器被設(shè)置為網(wǎng)格布局，并且包含了三列和三行。其中，第一列和第三列的寬度都是 1fr，即平均分配剩余可用空間的寬度；第二列的寬度是 2fr，即占據(jù)剩余可用空間的一半。第一行的高度是 50px，第二行的高度是 100px，第三行的高度是 1fr，即占據(jù)剩余可用空間的全部高度。

除了以上兩種屬性外，還有一些其他的柵格布局屬性，比如

grid-gap

來設(shè)置行和列之間的間隔，

grid-template-areas

來定義網(wǎng)格區(qū)域，

grid-auto-rows

和

grid-auto-columns

來設(shè)定不在網(wǎng)格中的元素的寬高等屬性。這些屬性可以組合使用，靈活構(gòu)建出適合不同設(shè)備下的頁面布局。