GRID佈局

GRID佈局

兼容性

IE10 IE11 支持老的語法
目前大多數的瀏覽器實現了支持, 或者停留在實驗特性

基本概念

Grid Container 網格容器
Grid Item 網格項
Grid Line 網格項
Grid Track 網格軌道
Grid Cell 網格單元
Grid Area 網格區

Container的屬性

定義在容器的屬性 display grid-template-columns grid-template-rows grid-template-areas grid-column-gap grid-row-gap grid-gap justify-items align-items justify-content align-content grid-auto-columns grid-auto-rows grid-auto-flow grid

• display

  grid                生成塊級網絡
    inline-grid         生成行內網絡
    subgrid             做爲網格項須要繼承父網格的行列大小

• grid-template-columns grid-template-columns 設置行和列的大小

  grid-template-columns: 40px 50px auto 50px 40px ;
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
      // line-name track-size line-name 在行軌道或列軌道兩邊是網格線
    grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];  // 網格線double name
    grid-template-columns: repeat(3, 20px [col-start]) 5%;  // 等價於下面的表達
    grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
    grid-template-columns: repeaat(3, 1fr);  // 將容器分爲三等份
    grid-template-columns: 1fr 50px 1fr 1fr;  // fr 的行列將劃分剩餘部分

• grid-template-areas

  經過獲取網格項中的grid-area屬性值（名稱），來定義網格模版。重複網格區（grid-area）名稱將跨越網格單元格，‘.’表明空網格單元

  .container {
      display: grid;
      grid-template-columns: 50px 50px 50px 50px;
      grid-template-rows: auto;
      grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"
    }
    .item-a{
      grid-area: header;
    }
    .item-b{
      grid-area: main;
    }
    .item-c{
      grid-area: sidebar;
    }
    .item-d{
      grid-area: footer;
    }

• grid-gap: grid-row-gap 和 grid-column-gap 的簡寫

• justify-items
  垂直於列網格線對齊

  start end center stretch(默認)

• align-items
  垂直於行網格線對齊

  start end center stretch

• justify-content
  使用px等非彈性單位定義, 總網格區域大小可能會小於網格容器, 設置網格橫向對其方式

  start           頂部對齊
    end             底部對齊
    center          居中對齊
    stretch         填滿網格容器
    space-around    網格項兩邊間距相等，網格項之間間隔是單側的2倍
    space-between   兩邊對齊, 網格項之間間隔相等
    space-evenly    網格項間隔相等

• align-content

• grid-auto-columns grid-auto-rows
  自動生成隱式網格軌道, 當定位網格超出網格容器的範圍時, 將自動建立隱式網絡軌道

• grid-auto-flow

  row         按照行依次從左到右排列
    column      按照列依次從上到下排列
    dense       按前後順序排列

• grid

  grid: 200px auto / 1fr auto 1fr;

Item的屬性

grid-column grid-column-start grid-column-end 的縮寫
grid-row grid-row-start grid-row-end 的縮寫
grid-area 父容器定義的 grid-template-areas
justify-self
align-self

• justify-self 定義單個網格項垂直於列網格線的對齊方式

start:        網格區域左對齊
  end:          網格區域右對齊
  center:       網格區域居中
  stretch:      網格區域填滿(默認)

• align-self 定義單個網格項垂直於行網格線的對齊方式