記錄一下grid佈局的應用，因為在日常工作中，運用element-ui的關係，導致grid佈局並不是運用特別多，本身這類ui就已經在實現上運用到了，但是還是需要知道如何使用。

	<div class="par-grid">
		<div class="child-grid"></div>
		<div class="child-grid"></div>
		<div class="child-grid"></div>
		<div class="child-grid"></div>
		<div class="child-grid"></div>
		<div class="child-grid"></div>
		<div class="child-grid"></div>
            <div class="child-grid"></div>
		<div class="child-grid"></div>
	</div>
 

 設定成grid，如同設定flex佈局一般。只需要將par-grid的display屬性設定成grid即可。這樣一個簡單的網格佈局就出來了。

對於行以及列的設定，需要用到grid-template-row以及grid-template-column屬性。下面的程式碼是建立一個三行三列的網格，以及每行每列的大小都是100px。

	.par-grid{
		display: grid;
		grid-template-columns: 100px 100px 100px;
		grid-template-rows: 100px 100px 100px;
	}

對於幾行幾列可以自行增加，這只是一個示範作用。另外與這兩個屬性差不多的是: grid-template-areas(各個網格標題)。

完成了對網格佈局的設定之後，也有與flex佈局相對應的子元素設定。grid-column-start,grid-template-ed,grid-row-start,grid-template-end。寫個例子：

.items{
    grid-column-start: 1,
    grid-column-end: 4
}

上面程式碼是每列從第一條網格線到第四條網格線，同理grid-row-start也是相同用法。對於行列都是相對應的簡寫，grid-column,grid-row。兩者都接受兩個引數：第一個是開始第二個是結束，但是中間需要 / 來隔開。比如：<start-line> / <end-line>。還有一種寫法， <start-line> / span <value>。當然同樣的縮寫肯定少不了grid-area。

還有一個屬性用於控制行與行以及列與列之間的間隙，即grid-column-gap,gri-row-gap。以及他們兩者的縮寫：grid-gap，第一個引數長度代表row，第二個引數長度代表column。

剩下該介紹的就是對於網格佈局的對齊方式，對齊的屬性無外乎就兩種對齊，有一段是介紹justify對齊和align對齊的方式的區別：When you justify something, you’re changing the alignment according to the main-axis. When you align something, you’re changing the alignment according to the cross-axis。簡單的說就是justify是用於水平方向的對齊，而align是用於垂直方向的對齊。

justify：justify-content, justify-items, justify-self。

align：align-content, align-items, align-self。

顯而易見，content以及items是用於設定在父節點上的，分別用於整個網格的對齊和各個網格子元素的對齊方式。而self是用於設定在單獨的一個子元素上。它們每一個對齊的方式都共有四個值：start，end，center，stretch。裡面需要解釋的只有stretch，解釋可以為拉伸、或者填充，它會鋪滿一個網格空間。而對於content的屬性來說另有三個取值：space-around，space-between，space-evenly。

space-around：在每個網格之間放置一個相同的大小的空間，在最左以及最右兩端各放置一半空間。

space-betwenn：與space-aroud不同在於，左右兩端不需要的多餘的空間閒置。

space-evenly：與space-around不同在於，左右兩端的空間與網格之間的空間是相同的。

有趣的是偶然間看見到了grid-auto-flow這個屬性，它的解釋是如果你沒有明確放置在網格上的網格項（item），自動放置演算法會自動放置這些網格項。它的值有三個：row，column，dense。dense的解釋為：告訴自動佈局演算法在稍後出現較小的網格項時，嘗試填充網格中較早的空缺。需要注意到的是，dense可能導致你的網格項出現亂序。以下是一個來自別的部落格的例子：

<div class="container">
    <div class="item-a">item-a</div>
    <div class="item-b">item-b</div>
    <div class="item-c">item-c</div>
    <div class="item-d">item-d</div>
    <div class="item-e">item-e</div>
</div>

.container {
    display: grid;
    grid-template-columns: 60px 60px 60px 60px 60px;
    grid-template-rows: 30px 30px;
    grid-auto-flow: row;
}

.item-a {
    grid-column: 1;
    grid-row: 1 / 3;
}
.item-e {
    grid-column: 5;
    grid-row: 1 / 3;
}

顯示的結果如上圖，因為是按照行來排列的所以應該和大家所想的並無差距，但是當grid-auto-flow換成了column就會有點奇妙的變化：

item-c會自動填充到b的下方，但是你可能會好奇為什麼item-e不會挪到d的左邊，是因為在排列行的時候固定有5行因此itemd的左變是會留白兩個網格。

很愉快的把grid佈局介紹到這了，一方面是為了加深印象一方面也是怕自己遺忘，以後可以回來重新閱讀。