grid佈局基本概念

前端小兵發表於2019-03-13

網格容器

  • 通過在元素上宣告display:grid或display: inline-grid來建立一個網格容器，設定後該元素的所有直系子元素將成為網格元素
<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
</div>
.wrapper {
    display: grid;
}
複製程式碼

網格軌道

  • 我們通過grid-template-columns和grid-template-rows屬性來定義網格中的列和行；一個網格軌道就是網格中任意兩條線之間的空間。
  • grid-template-columns: 定義網格中的列
  • grid-template-rows: 定義網格中行

fr單位

  • 網格引入了新的長度單位fr; fr單位代表網格容器中可用空間的一部分，軌道會隨著可用空間增長和收縮。
<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
</div>
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
複製程式碼

使用repeat()

  • 有著多軌道的大型網格可使用repeat() 標記來重複部分或整個軌道列表
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
//也可寫成
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

複製程式碼
  • repeat語句可以用於重複軌道列表中的一部分
//起始軌道為100畫素，接著重複了4個1fr的軌道，最後再新增了一個100畫素的軌道
.wraper {
    display: grid;
    grid-template-columns: 100px repeat(4, 1fr) 100px;
}

複製程式碼
  • repeat語句可以傳入一個軌道列表，因此你可以用它來建立一個多軌道模式的重複軌道列表。
//網格將有共計10個軌道，為1個1fr軌道後面跟著1個2fr軌道，該模式重複5次。
.wrapper {
    display: grid;
    grid-template-columns: repeat(5,1fr,2fr);
}

複製程式碼

隱式和顯式網格

  • 使用grid-template-columns和grid-template-rows屬於定義的是顯示網格的行和列；
  • 如果你在網格定義之外又放了一些東西，或者因為內容的數量而需要的更多網格軌道的時候，網格將會在隱式網格中建立行和列。按照預設，這些軌道將自動定義尺寸，所以會根據它裡面的內容改變尺寸。
  • 在隱式網格中用 grid-auto-rows 和 grid-auto-columns 屬性來定義一個設定大小尺寸的軌道。
//用 grid-auto-rows 屬性來確保在隱式網格中建立的軌道是200畫素高
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
}
複製程式碼
  • 定義的顯示網格尺寸優先順序大於定義的隱式網格尺寸
//軌道高250px
.wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(4, 250px); //優先順序更高
    grid-auto-rows: 200px;
}
複製程式碼

軌道大小和minmax()

  • 用minmax()函式可以給網格一個最小的尺寸，確保他們能擴大到容納他裡面新增的內容，同時也不限定死最大高度，網格可以隨著內容延伸。
//自動建立的行高將會是最小100畫素，最大為auto。用auto意味著行的尺寸將會根據內容的大小來自動變換：根據本行中最高的單元，把空間擴充套件到足夠容納該單元。
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px,auto);
}
複製程式碼

網格線

  • 當我們定義網格時，我們定義的是網格軌道，而不是網格線；grid會為我們建立編號的網格線來讓我們定位每一個網格元素，例如下面這個三列兩行網格中就擁有四條縱向的網格線
  • 網格線的編號順序取決於文章的書寫模式，在從左至右書寫的語言中，編號為 1 的網格線位於最左邊。

跨軌道放置網格元素

  • grid-column-start: 網格列線開始編號
  • grid-column-end: 網格列線結束編號
  • grid-row-start: 網格行線開始編號
  • grid-row-end: 網格行線結束編號

網格單元

  • 一個網格單元是在一個網格元素中最小的單位， 從概念上來講其實它和表格的一個單元格很像

網格區域

  • 網格元素可以向行或者列的方向擴充套件一個或多個單元，並且會建立一個網格區域；網格區域的形狀應該是一個矩形，也就是說你不可能建立出一個類似於“L”形的網格區域

網格間距

  • 在兩個網格單元之間的 網格橫向間距 或 網格縱向間距 可使用grid-column-gap和grid-row-gap屬性來建立;
  • 間距只出現在網格軌道與軌道之間，它們並不會出現在網格容器的四周;
  • 間距使用的空間會在 使用彈性長度fr的軌道的空間計算前就被留出來，間距的尺寸定義行為和普通軌道一致，但不同的是你不能向其中插入任何內容。從以基線定位的角度來說，間距就像一條很寬的基線。

網格間距縮寫

  • 這兩個屬性可以用grid-gap簡寫。如果你只給出一個值，那這個值會同時應用於行間距和列間距。如果你給了兩個值，第一個會被用於grid-row-gap，第二個則會被用於grid-column-gap
  • grid-gap: 10px 20px:先是行間距後是列間距
.wrapper {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 100px);
     grid-gap: 1em 20px;
}
複製程式碼

巢狀網格

  • 一個網格元素可以也成為一個網格容器，巢狀網格和他的父級並沒有關係
  • 當元素不是網格容器的直接子級元素時，它們不會參與到網格佈局中，並顯示為正常的文件流

使用z-index控制層級

  • 多個網格專案可以佔用同一個網格單位，使用z-index屬性控制重疊的順序,z-index越大層級越高

網格佈局結合彈性佈局

  • 當抉擇該用網格還是彈性盒時，你可以問自己一個簡單的問題
    • 我只需要按行或者列控制佈局？那就用彈性盒子
    • 我需要同時按行和列控制佈局？那就用網格

相關文章