Grid 網格項目對齊、順序與重疊

雖然網格項目元素會根據軸線自動排列，但如果遇到有指定長寬的元素，可能就需要額外進行「對齊」，或處理「重疊」的狀況，這篇教學會介紹 Gird 網格項目的對齊樣式屬性、順序的樣式屬性，以及處理項目重疊的狀況。

延伸閱讀：Grid 網格容器與格線、Grid 網格空間與命名、Grid 網格流向與間距、Grid 排列網格項目

快速導覽：

• 水平對齊樣式屬性
  • justify-self、justify-items、justify-content
• 垂直對齊樣式屬性
  • align-self、align-items、align-content
• order 網格項目順序
• 網格項目重疊

水平對齊樣式屬性

處理 Gird 網格元素水平對齊的樣式屬性共有三種：

水平對齊 justify-self

justify-self 是作用於 Grid「網格項目」的樣式屬性，可以個別設定每個網格項目在各自網格裡的水平對齊方式，沒有繼承特性，有下列幾種屬性值：

下方範例展示八種不同屬性值對於網格項目水平對齊的影響。

線上展示：https://codepen.io/oxxo/pen/wvVQaLg

<!-- HTML 程式碼-->
<div class="g demo"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 480px;
    height: 200px;
    outline: 1px solid #000;
    position: absolute;
    top: 50px;
    left: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  .demo div {
    z-index: 2;
    outline: 1px dashed #000;
  }
  .a div:nth-child(1) {
    justify-self: start;
    background: #f44;
  }
  .a div:nth-child(2) {
    justify-self: end;
    background: #09f;
  }
  .a div:nth-child(3) {
    justify-self: self-start;
    background: #0c0;
  }
  .a div:nth-child(4) {
    justify-self: self-end;
    background: #f90;
  }
  .a div:nth-child(5) {
    justify-self: left;
    background: #f0f;
  }
  .a div:nth-child(6) {
    justify-self: right;
    background: #ff0;
  }
  .a div:nth-child(7) {
    justify-self: center;
    background: #999;
  }
  .a div:nth-child(8) {
    justify-self: stretch;
    background: #0ff;
  }
</style>

因為 justify-self 是對齊網格容器的軸線 ( 各自網格的邊緣 )，因此如果軸線小於網格容器寬度，就會發生不會碰到網格容器邊緣的狀況。

水平對齊 justify-items

justify-items 是作用於 Grid「網格容器」的樣式屬性，沒有繼承特性，使用之後網格容器裡的所有網格項目，都會按照指定的屬性值進行水平對齊，這個樣式有下列幾種屬性值：

下方範例展示八種不同屬性值對於網格項目水平對齊的影響。

線上展示：https://codepen.io/oxxo/pen/zYgMGVM

<!-- HTML 程式碼-->
<div class="g demo"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g1 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g2 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g3 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g4 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g5 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g6 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g7 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g8 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 400px;
    height: 400px;
    outline: 1px solid #000;
    position: absolute;
    top: 50px;
    left: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, 1fr);
  }
  .g.a {height: 50px;}
  .demo div {
    z-index: 2;
    outline: 1px dashed #000;
  }
  .g1 {top: 50px;}
  .g1.a {justify-items: start;}
  .g2 {top: 100px;}
  .g2.a {justify-items: end;}
  .g3 {top: 150px;}
  .g3.a {justify-items: self-start;}
  .g4 {top: 200px;}
  .g4.a {justify-items: self-end;}
  .g5 {top: 250px;}
  .g5.a {justify-items: left;}
  .g6 {top: 300px;}
  .g6.a {justify-items: right;}
  .g7 {top: 350px;}
  .g7.a {justify-items: center;}
  .g8 {top: 400px;}
  .g8.a {justify-items: stretch;}

  .a div:nth-child(1) {background: #f44;}
  .a div:nth-child(2) {background: #09f;}
  .a div:nth-child(3) {background: #0c0;}
  .a div:nth-child(4) {background: #f90;}
</style>

由於 justify-items 和 justify-self 類似，都是對齊網格容器的軸線 ( 各自網格的邊緣 )，因此如果軸線小於網格容器寬度，就會發生不會碰到網格容器邊緣的狀況。

水平對齊與均分 justify-content

justify-content 是作用於 Grid「網格容器」的樣式屬性，沒有繼承特性，使用後會讓所有網格項目參考「整個網格」進行「水平對齊」或「水平均分」，如果是均分，則會使用項目填滿網格後的寬度去均分，間隔寬度則使用網格容器剩餘的寬度，如果網格項目設定了大於網格的寬度，則會使用網格項目所設定的寬度，這個樣式有下列幾種屬性值：

下方範例展示前五種不同屬性值對於網格項目水平對齊的影響，特別注意 justify-content 是對齊整個網格，並不是對齊每條軸線。

線上展示：https://codepen.io/oxxo/pen/VwoVLow

<!-- HTML 程式碼-->
<div class="g demo"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g1 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g2 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g3 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g4 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g5 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
  

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 400px;
    height: 250px;
    outline: 1px solid #000;
    position: absolute;
    top: 50px;
    left: 50px;
    display: grid;
    grid-template-columns: repeat(4, 70px);
    grid-template-rows: repeat(5, 1fr);
  }
  .g.a {height: 50px;}
  .g.a div{width: 50px;}
  .demo div {
    z-index: 2;
    outline: 1px dashed #000;
  }
  .g1 {top: 50px;}
  .g1.a {justify-content: start;}
  .g2 {top: 100px;}
  .g2.a {justify-content: end;}
  .g3 {top: 150px;}
  .g3.a {justify-content: left;}
  .g4 {top: 200px;}
  .g4.a {justify-content: right;}
  .g5 {top: 250px;}
  .g5.a {justify-content: center;}

  .a div:nth-child(1) {background: #f44;}
  .a div:nth-child(2) {background: #09f;}
  .a div:nth-child(3) {background: #0c0;}
  .a div:nth-child(4) {background: #f90;}
</style>

下方範例展示三種不同屬性值對於網格項目水平均分的影響，圖示中紅色線段表示網格項目的大小，黑色線段表示均分後的間隔，需要注意如果網格軸線填滿網格容器，則因為沒有「多餘的空間」，均分的效果就會完全一致。。

線上展示：https://codepen.io/oxxo/pen/bGXQdXW

<!-- HTML 程式碼-->
<div class="g demo"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g1 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g2 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g3 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 400px;
    height: 150px;
    outline: 1px solid #000;
    position: absolute;
    top: 50px;
    left: 50px;
    display: grid;
    grid-template-columns: repeat(4, 70px);
    grid-template-rows: repeat(3, 1fr);
  }
  .g.a {height: 50px;}
  .g.a div{width: 50px;}
  .demo div {
    z-index: 2;
    outline: 1px dashed #000;
  }
  .g1 {top: 50px;}
  .g1.a {justify-content: space-between;}
  .g2 {top: 100px;}
  .g2.a {justify-content: space-around;}
  .g3 {top: 150px;}
  .g3.a {justify-content: space-evenly;}

  .a div:nth-child(1) {background: #f44;}
  .a div:nth-child(2) {background: #09f;}
  .a div:nth-child(3) {background: #0c0;}
  .a div:nth-child(4) {background: #f90;}
</style>

垂直對齊樣式屬性

處理 Gird 網格元素水平對齊的樣式屬性共有三種：

垂直對齊 align-self

align-self 是作用於 Grid「網格項目」的樣式屬性，可以個別設定每個網格項目在各自網格裡的垂直對齊方式，沒有繼承特性，有下列幾種屬性值：

下方範例展示六種不同屬性值對於網格項目垂直對齊的影響。

線上展示：https://codepen.io/oxxo/pen/MWNzwNG

<!-- HTML 程式碼-->
<div class="g demo"><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 200px;
    height: 300px;
    outline: 1px solid #000;
    position: absolute;
    top: 50px;
    left: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
  .demo div {
    z-index: 2;
    outline: 1px dashed #000;
  }
  .a div:nth-child(1) {
    align-self: start;
    background: #f44;
  }
  .a div:nth-child(2) {
    align-self: end;
    background: #09f;
  }
  .a div:nth-child(3) {
    align-self: self-start;
    background: #0c0;
  }
  .a div:nth-child(4) {
    align-self: self-end;
    background: #f90;
  }
  .a div:nth-child(5) {
    align-self: center;
    background: #f0f;
  }
  .a div:nth-child(6) {
    align-self: stretch;
    background: #0ff;
  }
</style>

因為 align-self 是對齊網格容器的軸線 ( 各自網格的邊緣 )，因此如果軸線小於網格容器寬度，就會發生不會碰到網格容器邊緣的狀況。

垂直對齊 align-items

align-items 是作用於 Grid「網格容器」的樣式屬性，沒有繼承特性，使用之後網格容器裡的所有網格項目，都會按照指定的屬性值進行垂直對齊，這個樣式有下列幾種屬性值：

下方範例展示六種不同屬性值對於網格項目垂直對齊的影響。

線上展示：https://codepen.io/oxxo/pen/LYwXVwK

<!-- HTML 程式碼-->
<div class="g demo"><div></div><div></div><div></div><div></div></div>
<div class="g g1 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g2 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g3 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g4 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g5 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g6 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>


<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    height: 400px;
    outline: 1px solid #000;
    position: absolute;
    top: 50px;
    left: 50px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  .g.a {width: 50px;}
  .demo div {
    z-index: 2;
    outline: 1px dashed #000;
  }
  .g1 {left: 50px;}
  .g1.a {align-items: start;}
  .g2 {left: 100px;}
  .g2.a {align-items: end;}
  .g3 {left: 150px;}
  .g3.a {align-items: self-start;}
  .g4 {left: 200px;}
  .g4.a {align-items: self-end;}
  .g5 {left: 250px;}
  .g5.a {align-items: center;}
  .g6 {left: 300px;}
  .g6.a {align-items: stretch;}

  .a div:nth-child(1) {background: #f44;}
  .a div:nth-child(2) {background: #09f;}
  .a div:nth-child(3) {background: #0c0;}
  .a div:nth-child(4) {background: #f90;}
</style>

由於 align-items 和 align-self 類似，都是對齊網格容器的軸線 ( 各自網格的邊緣 )，因此如果軸線小於網格容器寬度，就會發生不會碰到網格容器邊緣的狀況。

垂直對齊和均分 align-content

align-content 是作用於 Grid「網格容器」的樣式屬性，沒有繼承特性，使用後會讓所有網格項目參考「整個網格」進行「垂直對齊」或「垂直均分」，如果是均分，則會使用項目填滿網格後的高度去均分，間隔寬度則使用網格容器剩餘的高度，如果網格項目設定了大於網格的高度，則會使用網格項目所設定的高度，這個樣式有下列幾種屬性值：

下方範例展示前三種不同屬性值對於網格項目垂直對齊的影響，特別注意 align-content 是對齊整個網格，並不是對齊每條軸線。

線上展示：https://codepen.io/oxxo/pen/OJKayLb

<!-- HTML 程式碼-->
<div class="g demo"><div></div><div></div><div></div><div></div></div>
<div class="g g1 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g2 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g3 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 220px;
    height: 400px;
    outline: 1px solid #000;
    position: absolute;
    top: 50px;
    left: 50px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, 70px);
  }
  .g.a {
    width: 60px;
    height: 400px;
  }
  .g.a div{height: 50px;}
  .demo div {
    z-index: 1;
    outline: 1px dashed #000;
  }
  .g1 {left: 50px;}
  .g1.a {align-content: start;}
  .g2 {left: 130px;}
  .g2.a {align-content: end;}
  .g3 {left: 210px;}
  .g3.a {align-content: center;}

  .a div:nth-child(1) {background: #f44;}
  .a div:nth-child(2) {background: #09f;}
  .a div:nth-child(3) {background: #0c0;}
  .a div:nth-child(4) {background: #f90;}
</style>

下方範例展示三種不同屬性值對於網格項目垂直均分的影響，圖示中紅色線段表示網格項目的大小，黑色線段表示均分後的間隔，需要注意如果網格軸線填滿網格容器，則因為沒有「多餘的空間」，均分的效果就會完全一致。

線上展示：https://codepen.io/oxxo/pen/MWNzagG

<!-- HTML 程式碼-->
<div class="g demo"><div></div><div></div><div></div><div></div></div>
<div class="g g1 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g2 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g3 a"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 320px;
    height: 400px;
    outline: 1px solid #000;
    position: absolute;
    top: 50px;
    left: 50px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, 60px);
  }
  .g.a {
    width: 60px;
    height: 400px;
  }
  .g.a div{height: 50px;}
  .demo div {
    z-index: 1;
    outline: 1px dashed #000;
  }
  .g1 {left: 50px;}
  .g1.a {align-content: space-between;}
  .g2 {left: 180px;}
  .g2.a {align-content: space-around;}
  .g3 {left: 310px;}
  .g3.a {align-content: space-evenly;}

  .a div:nth-child(1) {background: #f44;}
  .a div:nth-child(2) {background: #09f;}
  .a div:nth-child(3) {background: #0c0;}
  .a div:nth-child(4) {background: #f90;}
</style>

order 網格項目順序

order 樣式屬性除了作用於彈性項目，也可作用於網格項目，這個樣式屬性可以「改變網格項目的位置」，屬性值使用「無單位的整數」，預設值為 0，數字越小越「網格軸線構成的第一格」，下方的範例會改變原本 1～9 的順序。

線上展示：https://codepen.io/oxxo/pen/ExqOVYG

<!-- HTML 程式碼-->
<div class="g">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div>
</div>

<!-- CSS 程式碼 -->
<style>
  div {border: 1px dotted #666;}
  .g {
    width: 210px;
    height: 210px;
    border: 1px solid #000;
    display: grid;
    margin: 10px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    font-size: 30px;
  }

  .g div:nth-child(1) {order: 3;}
  .g div:nth-child(2) {order: 2;}
  .g div:nth-child(3) {order: 1;}
</style>

使用 order 時需要注意，透過 CSS 選擇器選取到的元素會被歸類為「同一個順序」，因此若選擇了多個元素，這些元素會一起移動，下方範例會透過 CSS 選擇器，將偶數元素的 order 設定為 2，將奇數元素的 order 設定為 3，就能讓偶數放在前面，奇數放在後面。

• 延伸閱讀：CSS 選擇器 ( CSS Selector )
• 線上展示：https://codepen.io/oxxo/pen/vYoQNYO

<!-- HTML 程式碼-->
<div class="g">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div>
</div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 210px;
    height: 210px;
    display: grid;
    margin: 10px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    font-size: 30px;
  }
  div {outline: 1px solid #000;}
  .g div:nth-child(2n){
    order:1;
    background: #f55;
  }
  .g div:nth-child(2n+1){
    order:2;
    background: #0cf;
  }
</style>

網格項目重疊

設定網格項目時，有時會使用「自訂」的長寬或外邊界數值，這可能會造成項目之間互相「重疊」的狀況，當發生這種狀況時，上下圖層的關係會按照 HTML 架構排列，後方的元素會覆蓋在前方的元素之上，下方的範例將第一個和第三個項目的長寬設定大於網格，又額外設定了外邊界，會看見彼此圖層覆蓋的狀況 ( 第一個項目因為在 HTML 排在最上方，所以會被後方項目覆蓋 )

線上展示：https://codepen.io/oxxo/pen/GRVwpRZ

<!-- HTML 程式碼-->
<div class="g">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div>
</div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    height: 300px;
    display: grid;
    margin: 50px;
    outline: 1px solid #000;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    font-size: 30px;
  }
  .g div {
    outline: 1px solid #000;
    background: #fffd;
  }

  .g div:nth-child(1),
  .g div:nth-child(3){
    width: 150px;
    height: 150px;
    background: #f66d;
    margin-top: -20px;
    margin-left: -20px;
  }
  .g div:nth-child(2){background: #0afd;}
  .g div:nth-child(3){background: #0f0d;}
</style>

如果要改變階層順序，可使用 z-index 和 order 的樣式屬性，但 order 不僅會影響上下圖層關係，還會改變網格項目的順序，下圖呈現兩種樣式屬性的差異。

線上展示：https://codepen.io/oxxo/pen/MWNzaWX

<!-- HTML 程式碼-->
<div class="g g1">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>
<div class="g g2">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    height: 200px;
    display: grid;
    margin: 30px 30px 80px;
    outline: 1px solid #000;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    font-size: 30px;
  }
  .g div {
    outline: 1px solid #000;
    background: #fffd;
  }

  .g1 div:nth-child(1),
  .g1 div:nth-child(3){
    width: 150px;
    height: 150px;
    background: #f66d;
    margin-top: -20px;
    margin-left: -20px;
    order: 1;
  }
  .g1 div:nth-child(2){
    background: #0afd; 
    order: 2;
  }
  .g1 div:nth-child(3){background: #0f0d;}

  .g2 div:nth-child(1),
  .g2 div:nth-child(3){
    width: 150px;
    height: 150px;
    background: #f66d;
    margin-top: -20px;
    margin-left: -20px;
    z-index: 1;
  }
  .g2 div:nth-child(2){
    background: #0afd; 
    z-index: 2;
  }
  .g2 div:nth-child(3){background: #0f0d;}
</style>

小結

通常進行網格容器排版時，比較少會需要使用對齊的樣式屬性，通常使用預設靠左對齊或置中對齊就可以處理大部分的狀況，就如同操作表格一樣簡單，但如果真的有對齊或均分的需求，就可以使用相關樣式屬性進行調整。

延伸閱讀：Grid 網格容器與格線、Grid 網格空間與命名、Grid 網格流向與間距、Grid 排列網格項目

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～