CSS中Grid布局的用法總結(附代碼)

這篇文章給大家介紹的內容是關於CSS中Grid 布局的用法總結(附代碼)，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助

1. 基礎用法

Grid 布局的核心屬性有5個:

.parent {    display: grid;    grid-template-colomns: 30px 1fr;    grid-template-rows: repeat(3, 30px) 1fr;    & > .child {        grid-column: 1 / 3;        grid-row: 1;    }}

總的來說, Grid 布局就是: 父元素先定義好自己有幾行幾列. 然後, 子項目定義自己在第幾行第幾列(可以跨越多行或者多列).

其中, display 屬性大家應該很熟悉了吧? 這裡不再多說.

repeat函數表示將1個css值重複n遍.

gird-column可以拆分為grid-column-start和grid-column-end兩個屬性.

gird-row可以拆分為grid-row-start和grid-row-end兩個屬性.

2. grid-template-areas和grid-area

grid-template-areas這個屬性其實有點表意字元的意思.

.parent {    display: grid;    grid-template-colomns: 100px 1fr;    grid-template-rows: 1fr 50px;    grid-template-areas:        "nav    content"        "footer footer ";    & > .item1 {      grid-area: nav;    }    & > .item2 {      grid-area: content;    }    & > .item3 {      grid-area: footer;    }}

上面我們將父元素分成了4格. 然後將左上的格子命名為nav, 右上的格子命名為content, 底部的格子命名為footer.

最後, 我們只需要在子項目中指定自己屬於哪個地區就可以了.

這樣寫有一個好處: 我們再也不用寫枯燥難懂的grid-column和grid-row了, 可以給自己的地區起一個語義化的名字

3. row-gap, colomns-gap, grid-gap

類似Flex, Grid 布局也支援行間距和列間距.

grid-gap是row-gap和colomns-gap的合并.

grid-gap也可以簡寫為gap.

注意: colomns-gap 的預設值是 normal, 表示列間距為1em

4. grid-auto-columns和grid-auto-rows

如果你事先不知道你的網格有幾行(有幾列), 這兩個屬性可以幫到你. 就像字面意思一樣, 這個屬性工作表示自增長的網格行(列)的高度(寬度)

尤其是當你渲染一個不定長度的列表的時候, 這個屬性會非常有用.

例如:

.parent {    display: grid;    grid-template-colomns: 1fr;    grid-auto-rows: 100px;    & > .child {        grid-column: 1;    }}

相關文章推薦:

關於彈性盒布局的介紹（附代碼）

CSS實現響應式布局的方法