摘要：經過上一篇文章，我們已經對grid布局有了一些基本的認識，但grid布局實在是太強大了，我們繼續來學習它：justify-items和align-items屬性：設置單元格的水平和垂直方向對齊方...

經過上一篇文章，我們已經對grid布局有了一些基本的認識，但grid布局實在是太強大了，我們繼續來學習它：

justify-items和align-items屬性：

設置單元格的水平和垂直方向對齊方式

水平方向上 justify-items:start|end|center|stretch;

垂直方向上 align-items:start|end|center|stretch;

start 起始方向對齊

center 居中對齊

end 末尾方向對齊

stretch 延伸，以填滿整個單元格，默認值

例如設置水平方向末尾對其 justify-items:end; ，垂直方向單元格填滿拉伸 align-items:stretch;

.box{
  border:1px solid #000;
  display:grid;
  grid-template-rows:120px 120px 120px;
  grid-template-columns:120px 120px 120px;
  column-gap:10px;
  row-gap:30px;
  justify-items:end;
  align-items:stretch;
  margin:0 auto;
  margin-top:10px;
  color:white;
  font-size:30px;
}

align-items:stretch; 和 justify-items:end; 水平垂直對齊方式可以用簡寫的方式 place-items:stretch end;，stretch代表垂直方向上的對齊方式，end代表水平方向的對齊方式。

justify-content 和 align-content屬性

設置容器的水平和垂直方向對齊方式

水平方向上 justify-content:start|end|center|stretch|space-around|space-between|space-evenly;

垂直方向上 align-content:start|end|center|stretch|space-around|space-between|space-evenly;

start 從行首開始排列

center 在容器中劇中排列。

end 從行末開始排列

stretch 延伸，以填滿整個容器，默認值

space-around 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最后一個元素到行尾的距離將會是相鄰元素之間距離的一半。

space-between 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。

space-evenly 項目與項目之間的距離和項目與起始位置的距離都相同。

例如設置水平方向平分靠兩邊對齊 justify-content:space-between;，垂直方向居中 align-items:center;

.box{
  border:1px solid #000;
  display:grid;
  grid-template-rows:120px 120px 120px;
  grid-template-columns:120px 120px 120px;
  column-gap:10px;
  row-gap:30px;
  justify-content:space-between;
  align-content:center;
  margin:0 auto;
  margin-top:10px;
  color:white;
  font-size:30px;
}

align-content:center; 和 justify-content:space-between; 水平垂直對齊方式可以用簡寫的方式 place-content:center space-between; ， center 代表垂直方向上的對齊方式，space-between代表水平方向的對齊方式。

grid-auto-columns/grid-auto-rows屬性

用來設置多出來的項目單元格的寬和高

設置一個三行三列的格子，并且多出第10個沒有定義高度的格子，這個格子默認會自動拉滿延伸到容器的底部。

    .box{
        border:1px solid #000;
        display:grid;
        width:500px;
        height:520px;
        grid-template-rows:120px 120px 120px;
        grid-template-columns:120px 120px 120px;
        column-gap:10px;
        row-gap:30px;
        margin:0 auto;
        margin-top:10px;
        color:white;
        font-size:30px;
      }

我們可以設置多出的格子的高度 grid-auto-rows:30px; 如圖所示，第10個格子的高度是30px：

如果排列的方式是先列后行，多出的格子默認是延伸到容器的右側：

想設置多出的格子的寬度就需要設置 grid-auto-columns:30px

   .box{
        border:1px solid #000;
        display:grid;
        width:500px;
        height:520px;
        grid-template-rows:120px 120px 120px;
        grid-template-columns:120px 120px 120px;
        column-gap:10px;
        row-gap:30px;
        grid-auto-flow:column;
        grid-auto-columns:30px;
        margin:0 auto;
        margin-top:10px;
        color:white;
        font-size:30px;
    }

如圖所示，設置后第10個格子的寬度：

項目屬性

grid-column-start/grid-column-end

grid-row-start/grid-row-end

用來指定item單元格的具體位置，根據在哪根網絡線，在項目里設置，如圖所示，設置N個列，就有N+1個列網絡線，行也是。

例如設置第一個單元格占兩個列格子，占兩個行格子，第二個單元格占一個列格子，占兩個行格子，緊跟在第一個單元格后面：

  .box{
        border:1px solid #000;
        display:grid;
        width:500px;
        height:520px;
        grid-template-rows:120px 120px 120px;
        grid-template-columns:120px 120px 120px;
        column-gap:10px;
        row-gap:30px;
        margin:0 auto;
        margin-top:10px;
        color:white;
        font-size:30px;
    }
    .div1{
      background:red;
      grid-column-start:1;
      grid-column-end:3;
      grid-row-start:1;
      grid-row-end:3;
    }
    .div2{
      grid-column-start:3;
      grid-column-end:4;
      grid-row-start:1;
      grid-row-end:3;
      background:green;
    }

如圖所示，grid-column-start:3;grid-column-end:4;grid-row-start:1;grid-row-end:3; 可以簡寫為： grid-row:span 2;grid-column:span 1;，也可以簡寫為： grid-row:1 / 3;grid-column:3 / 4;

grid-area用來指定item單元格的具體位置，使用時要與容器屬性 grid-template-areas 一起使用：

  .box{
        border:1px solid #000;
        display:grid;
        width:500px;
        height:520px;
        grid-template-rows:120px 120px 120px;
        grid-template-columns:120px 120px 120px;
        column-gap:10px;
        row-gap:30px;
        margin:0 auto;
        margin-top:10px;
        color:white;
        font-size:30px;
        grid-template-areas:"a a c"
                     "a a g"
                     "i j k"
                     "m n o";
      }
      .div1{
        grid-area:a;
        background:red;
      }

如圖所示，div1設置了單元格放在a區域內，grid-area除了與容器屬性 grid-template-areas 一起配合使用外，還可以單獨來使用 grid-area:1 / 1 / 3 / 3;，其實和 grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3; 一個意思，也可以達到下圖效果：

justify-self/align-self

設置單元格內容的水平垂直位置，和 justify-items、align-items屬性的用法完全一致，但只作用于單個項目

水平方向上 justify-self:start|end|center|stretch;

垂直方向上 align-self:start|end|center|stretch;

start 起始方向對齊

center 居中對齊

end末 尾方向對齊

stretch 延伸，以填滿整個單元格，默認值

例如設置第一個單元格水平方向居中對齊 justify-self:center;，垂直方向居中對齊 align-self:center;,第二個單元格水平方向末尾對齊 justify-self:center;，垂直方向開頭對齊 align-self:center;

.box{
  border:1px solid #000;
  display:grid;
  width:500px;
  height:520px;
  grid-template-rows:120px 120px 120px;
  grid-template-columns:120px 120px 120px;
  column-gap:10px;
  row-gap:30px;
  margin:0 auto;
  margin-top:10px;
  color:white;
  font-size:30px;
}
.div1{
  background:red;
  justify-self:center;
  align-self:center;
}
.div2{
  background:green;
  justify-self:end;
  align-self:start;
}

align-self:start; 和 justify-self:end; 水平垂直對齊方式可以用簡寫的方式 place-self:start end; ，start 代表垂直方向上的對齊方式，end 代表水平方向的對齊方式。