0%

CSS Grid Container

Posted on Edited on

CSS grid system part II

Container 容器 / 父元素

  • grid-template-columns 屬性可以定義網格排版要有幾列 (columns)，以及各列的寬度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    /* 一共四列，每列寬度相同 (父元素的寬度除以四) */
    /* 如果超過四項子元素，多的會自動放到下一行 */
}
  
.grid-container {
    display: grid;
    grid-template-columns: 80px 200px auto 40px;
    /* 1, 2, 4項固定寬度，第三項為可變寬度，吃掉父元素剩下的寬度*/
}

.wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr 2fr) 50px;
    gap: 5px;
    /* grid-template-columns: repeat({次數}, {格線} | {格線}) | {格線} | ... 
    fr 是 fraction，可以視為一個格單位，repeat 則是代表重複幾次()內的設定
    上面的寫法是父元素寬扣除掉 50px 後，剩餘的空間先除 2，然後每個單位內部再分隔成 1/3, 2/3
    {1/6} {2/6} {1/6} {2/6} 50px
    */
}
  • grid-template-rows 屬性可以定義每行的高度，輸入的數值使用空格分開
1
2
3
4
5
.grid-container {
    display: grid;
    grid-template-rows: 80px 150px;
}
/* 第一行高度 80px，第二行高度 150px */
  • justify-content 屬性用來對齊容器內的各元素
    • ※ 各網格的加總寬度不能超過容器寬度，否則這個屬性不會作用
1
2
3
4
5
6
7
8
9
10
11
.grid-container {
    display: grid;
    justify-content: space-evenly;
    /* 或是
    justify-content: space-around;
    justify-content: space-between;
    justify-content: center;
    justify-content: start;
    justify-content: end;
    */
}
  • align content 屬性用來垂直對齊容器內的各元素
    • ※ 各網格的加總高度不能超過容器高度，否則這個屬性不會作用
1
2
3
4
5
6
7
8
9
10
11
12
.grid-container {
    display: grid;
    height: 400px;
    align-content: center;
    /* 或是
    align-content: space-evenly;
    align-content: space-around;
    align-content: space-between;
    align-content: start;
    align-content: end;
    */
}

  • 什麼是 minmax 語法？

    • Ref. by MDN
    • 為使用在 CSS grid system 中的函數，其提供了一個上下界，讓該列、行的大小只會在範圍內變動
    • 可使用的屬性有：
      • grid-template-columns
      • grid-template-rows
      • grid-auto-columns
      • grid-auto-rows
    • 標準語法如下：
    • minmax ( [ | | | min-content | max-content | auto ] , [ | | | min-content | max-content | auto ] )

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="container">
  <div>
    Item as wide as the content, but at most 300 pixels.
    與內容同寬，但最多到 300px
  </div>
  <div>
    Item with flexible width but a minimum of 200 pixels.
    寬度會彈性變動，最少寬 200px
  </div>
  <div>
    Inflexible item of 150 pixels width.
    就是 150px，不會變動
  </div>
</div>