Grid 项目对齐与顺序

虽然网格项目元素会根据轴线自动排列，但如果遇到有指定长宽的元素，可能就需要额外进行“对齐”，或处理“重叠”的状况，这篇教学会介绍 Gird 网格项目的对齐样式属性、顺序的样式属性，以及处理项目重叠的状况。

• 相关文章：Grid 网格容器与格线、Grid 网格空间与命名、Grid 网格流向与间距、Grid 排列网格项目
• 延伸阅读：CSS 水平置中技巧、CSS 垂直置中技巧

快速导览：

• Grid 水平对齐样式属性
  • justify-self、justify-items、justify-content
• Grid 垂直对齐样式属性
  • align-self、align-items、align-content
• Grid 对齐缩写格式
  • place-self、place-items、place-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>

对齐缩写格式

CSS 有提供 Gird 网格元素水平与垂直对齐的样式缩写格式：

place-self 对齐缩写格式

place-self 是 align-self 和 justify-self 的缩写格式，属性值有两个，位于第一个的属性值是 align-self，第二个是 justify-self，如果只设定一个值，则第二个值与第一个值相同，如果其中一个属性值写错了发生无效的状况，则这个样式属性就没有作用。

下方范例中，独立撰写 align-self 和 justify-self 样式属性，与使用 place-self 样式属性所呈现的结果一模一样。

线上展示：https://codepen.io/oxxo/pen/zxOXyar

<!-- HTML 程式碼-->
<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>
<div class="g b"><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: 250px;
    height: 250px;
    outline: 1px solid #000;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    margin: 10px;
    float: left;
  }
  .a div:nth-child(1) {
    align-self: start;
    justify-self: start;
  }
  .a div:nth-child(2) {
    align-self: end;
    justify-self: end;
  }
  .a div:nth-child(3) {
    align-self: self-start;
    justify-self: self-start;
  }
  .a div:nth-child(4) {
    align-self: self-end;
    justify-self: self-end;
  }
  .a div:nth-child(5) {
    align-self: start;
    justify-self: left;
  }
  .a div:nth-child(6) {
    align-self: start;
    justify-self: right;
  }
  .a div:nth-child(7) {
    align-self: center;
    justify-self: center;
  }
  .a div:nth-child(8) {
    align-self: stretch;
    justify-self: stretch;
  }

  .b div:nth-child(1) {place-self: start;}
  .b div:nth-child(2) {place-self: end;}
  .b div:nth-child(3) {place-self: self-start;}
  .b div:nth-child(4) {place-self: self-end;}
  .b div:nth-child(5) {place-self: start left;}
  .b div:nth-child(6) {place-self: start right;}
  .b div:nth-child(7) {place-self: center;}
  .b div:nth-child(8) {place-self: stretch;}

  div div:nth-child(1){background: #f44;}
  div div:nth-child(2){background: #09f;}
  div div:nth-child(3){background: #0c0;}
  div div:nth-child(4){background: #f90;}
  div div:nth-child(5){background: #f0f;}
  div div:nth-child(6){background: #ff0;}
  div div:nth-child(7){background: #999;}
  div div:nth-child(8){background: #0ff;}
</style>

place-items 对齐缩写格式

place-items 是 align-items 和 justify-items 的缩写格式，属性值有两个，位于第一个的属性值是 align-items，第二个是 justify-items，如果只设定一个值，则第二个值与第一个值相同，如果其中一个属性值写错了发生无效的状况，则这个样式属性就没有作用。

下方范例中，独立撰写 align-items 和 justify-items 样式属性，与使用 place-items 样式属性所呈现的结果一模一样。

线上展示：https://codepen.io/oxxo/pen/LEPvMrW

<!-- HTML 程式碼-->
<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 g1 b"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g2 b"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>
<div class="g g3 b"><div>oxxo</div><div>oxxo</div><div>oxxo</div><div>oxxo</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 200px;
    height: 200px;
    outline: 1px solid #000;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    float: left;
    margin: 10px;
  }
  div div {
    width: 50px;
    height: 50px;
  }
  .g1.a {
    align-items: start;
    justify-items: start;
  }
  .g2.a {
    align-items: end;
    justify-items: end;
  }
  .g3.a {
    align-items: self-end;
    justify-items: center;
  }

  .g1.b {place-items: start;}
  .g2.b {place-items: end;}
  .g3.b {place-items: self-end center;}

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

place-content 对齐缩写格式

place-content 是 align-content 和 justify-content 的缩写格式，属性值有两个，位于第一个的属性值是 align-content，第二个是 justify-content，如果只设定一个值，则第二个值与第一个值相同，如果其中一个属性值写错了发生无效的状况，则这个样式属性就没有作用。

下方范例中，独立撰写 align-content 和 justify-content 样式属性，与使用 place-content 样式属性所呈现的结果一模一样。

线上展示：https://codepen.io/oxxo/pen/vEBzEQy

<!-- HTML 程式碼-->
<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></body>

<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></body>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 200px;
    height: 200px;
    outline: 1px solid #000;
    display: grid;
    grid-template-columns: repeat(2, 50px);
    grid-template-rows: repeat(2, 50px);
    margin: 10px;
    float: left;
    
  }
  .g.a {height: 200px;}
  .g.a div{width: 50px;}
  .demo div {
    z-index: 2;
    outline: 1px dashed #000;
  }
  .g1.a {
    align-content: start;
    justify-content: space-between;
  }
  .g2.a {
    align-content: space-around;
    justify-content: right;
  }
  .g3.a {
    align-content: space-evenly;
    justify-content: space-evenly;
  }
  .g4.a {place-content: start space-between;}
  .g5.a {place-content: space-around right;}
  .g6.a {place-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 排列网格项目
• 延伸阅读：CSS 水平置中技巧、CSS 垂直置中技巧

意见反馈