GRID布局

amc 發(fā)布于2019-08-30 10:57 / 1216人閱讀

摘要：布局兼容性支持老的語(yǔ)法目前大多數(shù)的瀏覽器實(shí)現(xiàn)了支持或者停留在實(shí)驗(yàn)特性基本概念網(wǎng)格容器網(wǎng)格項(xiàng)網(wǎng)格項(xiàng)網(wǎng)格軌道網(wǎng)格單元網(wǎng)格區(qū)的屬性定義在容器的屬性生成塊級(jí)網(wǎng)絡(luò)生成行內(nèi)網(wǎng)絡(luò)作為網(wǎng)格項(xiàng)需要繼承父網(wǎng)格的行列大

GRID布局 兼容性

IE10 IE11 支持老的語(yǔ)法
目前大多數(shù)的瀏覽器實(shí)現(xiàn)了支持, 或者停留在實(shí)驗(yàn)特性

基本概念

Grid Container 網(wǎng)格容器
Grid Item 網(wǎng)格項(xiàng)
Grid Line 網(wǎng)格項(xiàng)
Grid Track 網(wǎng)格軌道
Grid Cell 網(wǎng)格單元
Grid Area 網(wǎng)格區(qū)

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                生成塊級(jí)網(wǎng)絡(luò)
  inline-grid         生成行內(nèi)網(wǎng)絡(luò)
  subgrid             作為網(wǎng)格項(xiàng)需要繼承父網(wǎng)格的行列大小

grid-template-columns grid-template-columns 設(shè)置行和列的大小

  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 在行軌道或列軌道兩邊是網(wǎng)格線
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];  // 網(wǎng)格線double name
  grid-template-columns: repeat(3, 20px [col-start]) 5%;  // 等價(jià)于下面的表達(dá)
  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

通過(guò)獲取網(wǎng)格項(xiàng)中的grid-area屬性值（名稱），來(lái)定義網(wǎng)格模版。重復(fù)網(wǎng)格區(qū)（grid-area）名稱將跨越網(wǎng)格單元格，‘.’代表空網(wǎng)格單元

  .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 的簡(jiǎn)寫(xiě)

justify-items
垂直于列網(wǎng)格線對(duì)齊

  start end center stretch(默認(rèn))

align-items
垂直于行網(wǎng)格線對(duì)齊

  start end center stretch

justify-content
使用px等非彈性單位定義, 總網(wǎng)格區(qū)域大小可能會(huì)小于網(wǎng)格容器, 設(shè)置網(wǎng)格橫向?qū)ζ浞绞?/p>

  start           頂部對(duì)齊
  end             底部對(duì)齊
  center          居中對(duì)齊
  stretch         填滿網(wǎng)格容器
  space-around    網(wǎng)格項(xiàng)兩邊間距相等，網(wǎng)格項(xiàng)之間間隔是單側(cè)的2倍
  space-between   兩邊對(duì)齊, 網(wǎng)格項(xiàng)之間間隔相等
  space-evenly    網(wǎng)格項(xiàng)間隔相等

align-content

grid-auto-columns grid-auto-rows
自動(dòng)生成隱式網(wǎng)格軌道, 當(dāng)定位網(wǎng)格超出網(wǎng)格容器的范圍時(shí), 將自動(dòng)創(chuàng)建隱式網(wǎng)絡(luò)軌道

grid-auto-flow

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

grid

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

Item的屬性

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

justify-self 定義單個(gè)網(wǎng)格項(xiàng)垂直于列網(wǎng)格線的對(duì)齊方式

  start:        網(wǎng)格區(qū)域左對(duì)齊
  end:          網(wǎng)格區(qū)域右對(duì)齊
  center:       網(wǎng)格區(qū)域居中
  stretch:      網(wǎng)格區(qū)域填滿(默認(rèn))

align-self 定義單個(gè)網(wǎng)格項(xiàng)垂直于行網(wǎng)格線的對(duì)齊方式