CSS Grid 筆記 05-CSS Grid Implicit vs Explicit Tracks

CSS Grid Implicit vs Explicit Tracks

此篇介紹 Implicit Tracks (隱式邊線) 與 Explicit Tracks (顯式邊線)的差異點

Demo | Github

主要著重在 grid-template-columns 與 grid-template-rows 兩個 template 的設定對應 grid-auto-rows 與 grid-auto-columns ，以下說明這幾個項目的邊界範圍

grid-template-columns

.container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 200px 400px;
    }

這是設定直列的寬度，設定幾個數字表示設定幾列，例如上述的設定只有 200px 400px ，所以第一列是 200px 第二列式 400px ，其邊界範圍如下圖，左右的黑色實線表示 Explicit Tracks (顯式邊線)，而虛線表示 Implicit Tracks (隱式邊線)

grid-template-rows

與 grid-template-columns 類似，但是其設定為橫向的行，設定幾個數字表示設定幾行，上下的黑色實線為其設定範圍，超出的部分則為虛線顯示。

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 200px 400px;
  grid-template-rows: 100px 200px;
}

grid-auto-rows 與 grid-auto-columns

這兩個 CSS 屬性則是剛剛上述提到的 template 設定範圍外，就是虛線顯示的部分，其表格的寬高設定

• grid-auto-rows 表示超出設定範圍的行的高度
• grid-auto-columns 表示超出設定範圍的列的寬度

.container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 200px 400px;
    grid-template-rows: 100px 200px;
    grid-auto-rows: 100px;
    grid-auto-columns: 100px;
}

參考資料

• CSS-Grid 課程
• 作者 Wes Bos CSS-Grid Github
• 我的 CSS-Grid 練習Github