Grid 佈局介紹

grid 裏面屬性名稱

在學習grid標籤前,要先認清下列屬性表明的含義,方便學習.

容器內的屬性

grid-template-columns
        grid-template-rows
        數字 百分比 fraction分數
        grid-rwo-gap
        grid-column-gap
        grid-gap(縮寫)
        grid-templete-areas
        grid-auto-flow(改變排版方向)
        justift 改變主軸(橫向)佈局 align副軸(縱向)
        justify-items 
        align-items
        place-items(縮寫)
        justify-content 默認stretch
        align-content
        place-content(縮寫)
        grid-auto-columns
        grid-auto-rows

grid-template-columns
設置的是元素有列,每列的寬度是多少. 單位能夠用fr(fraction, 按比例分配寬度), px固定寬度, % 百分比寬度.grid-template-columns: 100px 100px 100px,定義網格內 共3豎每豎寬度100px. 固然這裏會發現若是有10豎的話那不得敲一堆100px???這裏爲了省事咱們能夠用repeat(3,100px)重複3次,每一個都是100px; 嫌麻煩不想去計算個數的話也能夠用repeat(auto-fill,100px)自動用100px 鋪滿.
grid-template-rows
的話就是一樣的理解方式,只不過row定義的是行的高度.沒有設置到的元素 默認回事stretch拉伸平分空白空間.
row-gap column-gap
row-gap 和column-gap 剛開始的寫法是 grid-row-gap/grid-column-gap 後來改成如今的row-gap/column-gap. 分別是定義行間的距離和列間距離.能夠縮寫爲gao:列間距 行間距. 若是兩個數值相同的話,能夠所寫成一個.
grid-template-area
分劃區域,分化的時候要注意,咱們的佈局是盒子(方方正正的),所以劃分區域也要是方形區域,否則會致使代碼錯誤不能識別.
grid-auto-flow
和flex的direction很想,定義排列方式.橫向row 豎向columns.不過這裏多了個屬性row dense, column dense. 是爲了節約頁面空間,自動補滿.
justify-