記錄一下grid布局的應用，因為在日常工作中，運用element-ui的關係，導致grid布局並不是運用特別多，本身這類ui就已經在實現上運用到了，但是還是需要知道如何使用。
對於行以及列的設定，需要用到grid-template-row以及grid-template-column屬性。下面的**是建立乙個三行三列的網格，以及每行每列的大小都是100px。
.par-grid完成了對網格布局的設定之後，也有與flex布局相對應的子元素設定。grid-column-start,grid-template-ed,grid-row-start,grid-template-end。寫個例子：
.items還有乙個屬性用於控制行與行以及列與列之間的間隙，即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可能導致你的網格項出現亂序。以下是乙個來自別的部落格的例子：
item-a
item-b
item-c
item-d
item-e
.container.item-a
.item-e
item-c會自動填充到b的下方，但是你可能會好奇為什麼item-e不會挪到d的左邊，是因為在排列行的時候固定有5行因此itemd的左變是會留白兩個網格。
很愉快的把grid布局介紹到這了，一方面是為了加深印象一方面也是怕自己遺忘，以後可以回來重新閱讀。
CSS的Grid網格布局
grid網格布局 就是通過設定百分比，或者預設劃分的單位個數，來達到寬度自適應的效果 比如，頁面控制項的寬度，設定自適應隨著顯示器的寬度的增加而增加，網頁永遠佔滿整個螢幕 searchcontentrowtopstyle rowleft rowonelineone rowonelinetwo row...
Grid網格布局
前言 就目前為止，css的grid和flexbox結合將是解決布局的最佳方案。雖然瀏覽器對css grid和flexbox的屬性未完全支援，但對於實現布局而言，這已是一種非常完美的結合。如果css box alignment module level3能得到更好的支援的話，那麼對於web的布局將是一...
Grid網格布局
flex 布局是軸線布局，只能指定 專案 針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產生單元格，然後指定 專案所在 的單元格，可以看作是二維布局。grid 布局遠比 flex 布局強大。可以使用repeat repeat 3,33.33 定義三列，每一列為33....