初步了解和瀏覽器支援
使用grid布局非常簡單，你只需要給容器（container）定義：display:grid，並設定列（grid-template-columns）和 行（grid-template-rows）的大小，然後用grid-column和grid-row定義容器子元素（grid-item專案）的位置。與flexbox布局類似，一開始專案的排列順序並不重要，可以放置在容器的任何位置，這也使得你非常容易通過**查詢重新排列你的專案。想象一下，當你定義整個頁面的布局時，你只需要幾行css就可以完成頁面重排以便適應各種螢幕寬度，這得有多麼神奇！
好東西總是來的晚，不要焦躁，不要沮喪。活好每一天，自然就等到了。
瀏覽器支援度
2018/10/23的caniuse統計：
grid支援度
用法1.網格容器（grid container）
元素應用display:grid，它是其所有網格項的父元素。下面例子container就是網格容器。
.container 和flex布局相似的是網格布局只對直屬子元素有效，也就是只有item是網格項（grid item），而sub-item不是。 相關屬性 1. display 剩餘部分。 .container 3. grid-template-areas 通過獲取網格項中的grid-area屬性值（名稱），來定義網格模版。重複網格區（grid-area）名稱將跨越網格單元格，『.』代表空網格單元。 
4. grid-column-gap
網格單元間距。
屬性值：
line-size: 網格線間距,設定單位值。
垂直於列網格線對齊，適用於網格容器裡的所有網格項。
居中：.container
填充：.container
垂直於行網格線對齊，適用於網格容器裡的所有網格項。
居中：.container
填充：.container
布局（flex布局）
彈性盒模型 display flex，排列方式根據主軸方向排列。子元素超出預設不換行，而是進行壓縮 flex direction 彈性盒模型主軸方向設定 row 預設 從左到右 側軸 從上到下 row reverse 從右到左 側軸 從上到下 column 從上到下 側軸 從左到右 column r...
flex布局 彈性布局 伸縮布局
主要介紹下彈性布局的常用的一些屬性 當乙個盒子設定為display flex的時候,盒子會變為乙個彈性盒子,盒子內部的子元素會預設沿著主軸方向排布,此時會引出主軸和側軸的概念。主軸 預設水平向右 類似於x軸 側軸 與主軸垂直的就是側軸,預設垂直向下 類似於y軸 彈性盒子的主軸方向預設水平向右,但是可...
常用布局（浮動布局 絕對定位布局 聖杯布局）
常用布局 1.流式布局 2.浮動布局 3.絕對定位布局 4.聖杯布局 body 浮動布局 header bd footer main leftside right 絕對定位布局 header bd footer leftside main right 聖杯布局 header main bd foot...