[Day25] grid 容器對齊屬性

12th鐵人賽 css grid

placeholder name

2020-10-10 22:31:11

1598 瀏覽

如果熟悉 flexbox 的對齊屬性，在這邊的用法也是大同小異。在 grid 中因為沒有主次軸的概念， justify-* 通常是操控"行"，align-* 是操控"列"。能夠使用在 grid 的容器對齊屬性包括：

1.justify-content
2.align-content
3.justify-items
4.align-items

對齊網格

justify-content / align-content

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly | left | right;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
預設: start

和 flexbox 中的使用方式與概念幾乎一樣，在 flexbox 是調整"所有彈性項目的位置"；在 grid 中是調整"網格環境的位置"，有些要注意的地方是：

1.在 grid 屬性值的名稱中，使用的是 start 和 end；在 flexbox 中則是使用 flex-start 跟 flex-end。
2.在 grid 是以 justify-content 為操控"行"，align-content 為操縱"列，操控"網格環境"在"網格容器"中的位置，不會受到網格流向 (grid-auto-flow) 的影響；flexbox 是以主軸和次軸為準，操控所有彈性項目在彈性容器的位置，所以一旦軸向更換就得更換方向。
3.justify-content 另外還有 left 和 right 可以使用，但在 grid 中功能就如同 start 和 end。
4.align-content 有些說明中有 left 和 right，但我試用了之後沒有效果（然後開始懷疑人生？）。

範例

<style>
.container{
  display: inline-grid;
  width: 240px;
  height: 120px;
  grid-auto-flow: column;
  grid-template-columns: 40px 40px 40px;
  grid-template-rows: 40px 40px;
  background-color: #a5def5;
  gap: 20px 60px; /*搭配調整看看變化*/
  justify-content: start; /*調整屬性值看看變化*/
}
.item {
  width: 40px;
  height: 40px;
  color: white;
  background-color: #00A0E9;
}
</style>
<body>
  <div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
  </div>
</body>

簡單的說明屬性值的特性：

start、end、center 是將"網格環境"對齊"網格容器"中的開頭、尾巴、中間。
查了許多文章都說明 stretch 會將沒有設定網格環境的尺寸，拉伸到貼合網格環境的大小，但實際寫時發現並沒有作用。(但文件也沒特別做說明，於是開始懷疑人生？)
space-between 和 gap 時會忽視 gap 的值，直到網格項目尺寸 + gap 值總和超出網格容器，因為是以流向的開頭開始計算，超出網格容器的方向會是由網格容器的尾巴凸出。
space-around 在遇到 gap 時，計算方式會以完成這個屬性之後，剩下的會以 gap / 網格項目兩側的空間數量(網格項目 * 2) 來向兩側增加尺寸。因為是對齊流向的中間，超出容器時是以兩側平均凸出容器。
space-evenly 在遇到 gap 時，計算方式會以完成這個屬性之後，剩下的會以 gap / 空間數量(網格項目 + 1) 來向兩側增加尺寸。超出容器的方式也是對其中線以兩側平均凸出容器。

justify-items / align-items

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
預設: stretch

和 flexbox 中的使用方式與概念幾乎一樣，在 flexbox 是調整"每個彈性項目的位置"；在 grid 中是調整"網格項目在網格區域中的位置"，有些要注意的地方是：

1.在 grid 屬性值的名稱中，使用的是 start 和 end；在 flexbox 中則是使用 flex-start 跟 flex-end。
2.grid 中不像 flexbox 有 baseline 這個屬性值的概念。
3.如果你的網格項目跟你的網格區域一樣大，你將看不出變化。

範例

<style>
.container{
  display: inline-grid;
  width: 360px;
  height: 200px;
  grid-auto-flow: row;
  grid-template-columns: 80px 80px 80px;
  grid-template-rows: 80px 80px;
  background-color: #a5def5;
  gap: 0px 0px;
  align-items: baseline;
}
.item {
  width: 40px;
  height: 40px;
  color: white;
  background-color: #00A0E9;
}
</style>
<body>
  <div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
  </div>
</body>

items 的屬性值相對上簡單許多：

1.justify-items 是操控彈性項目的"行"向位置，align-items 是操控彈性項目的"列"向位置。
2.start、end、center 是將"網格環境"對齊"網格容器"中的開頭、尾巴、中間。
3.stretch 是將沒有設定尺寸的網格項目拉伸到和網格區域（如果你的網格項目只佔一格的話就是網格單元格）一樣大，也是預設。如果網格項目有設定尺寸，stretch 會沒有效果，因為你有設定尺寸它就不會拉伸；而有設定尺寸時，因為對齊的方向都是以流向的開始為開頭，可能會有預設是 start 的錯覺。

資料來源：