這篇文章給大家介紹的內容是關於CSS中Grid 佈局的用法總結(附代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助
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
兩個屬性.
<span style="font-size: 16px;">#grid-template-areas</span>
和<span style="font-size: 16px;">grid-area</span>
#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
了, 可以給自己的區域一個語意化的名字
<span style="font-size: 16px;">#row-gap</span>
##, colomns-gap<span style="font-size: 16px;"></span>
, grid-gap<span style="font-size: 16px;"></span>
grid-gap是
row-gap和
colomns-gap的合併.
grid-gap也可以簡寫為
gap.
#注意: colomns-gap 的預設值是
normal , 表示列間距為
1em
grid-auto-columns<span style="font-size: 16px;"></span>
和grid-auto-rows<span style="font-size: 16px;"></span>
這個屬性表示自增長的網格行(列)的高度(寬度)
尤其是當你渲染一個不定長度的列表的時候, 這個屬性會非常有用.例如:.parent { display: grid; grid-template-colomns: 1fr; grid-auto-rows: 100px; & > .child { grid-column: 1; } }
以上是CSS中Grid佈局的用法總結(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!