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

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-gap是row-gap和colomns-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中文網其他相關文章！