首頁 > web前端 > css教學 > 主體

CSS中Grid佈局的用法總結(附程式碼)

不言
發布: 2018-08-01 15:28:21
原創
2265 人瀏覽過

這篇文章給大家介紹的內容是關於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- startgrid-column-end兩個屬性.

#gird-row可以拆分為grid-row-startgrid-row-end兩個屬性.

2. <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-columngrid-row了, 可以給自己的區域一個語意化的名字

3. <span style="font-size: 16px;">#row-gap</span>##, colomns-gap<span style="font-size: 16px;"></span>, grid-gap<span style="font-size: 16px;"></span>

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

grid-gaprow-gapcolomns-gap的合併.

grid-gap也可以簡寫為gap.

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

4. 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實作響應式佈局的方法#

以上是CSS中Grid佈局的用法總結(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板