flexbox用起來很爽，它幫助我們在一維方向上布局元素，就是水平或垂直方向。通常我們採用bootstrap或foundation這些框架實現二維網格布局。全新模組css網格布局（css grid layout）很快（caniuse）將為我們直接提供二維網格布局的能力。首先，grid的布局有以下三個特點：
和flexbox相類似的是，grid布局也是由容器元素（container）和子專案（children items）元素組成。只需在容器元素上設定display:grid，再通過grid-template-columns和grid-template-rows定義行和列的樣式即可。
示例如下：
"container">
"box box-1">box 1
"box box-2">box 2
"box box-3">box 3
"box box-4">box 4
"box box-5">box 5
"box box-6">box 6
"box box-7">box 7
複製**
.container
.box
複製**
可以看到可通過grid-gap設定子專案元素之間的水平、垂直間距。 目前所有item子專案元素尚未單獨設定樣式，就按照容器元素設定的樣式進行「安排」，即第一列150px、第二列150px、第三列80px；第一行100px，後面的全是auto。 如果想單獨調整某個子專案元素的樣式，可以通過設定grid-column-start,grid-column-end,grid-row-start，grid-row-end設定其位置和尺寸。
.box-1
複製**
如果稍微調整下 box1的grid-column-start為 2，可以看到box1從第2條垂直line開始：
.box-1
複製**
此外，用grid-column和grid-row可以達到和上面同樣的效果
.box-1
複製**
因為grid-gap並不會增加新的grid-line，所以即使grid-item即使看起來分開，也是同一條grid line
css grid布局雖方便且強大，但是瀏覽器支援還需要提高！
css grid布局筆記
grid布局 網格布局，通過在父元素上設定display grid 來設定乙個網格容器，內部的子元素採用網格的方式進行布局。fr單位 css自適應單位 在grid布局中如果一行分為四列，其中一列為固定width 100px，其他列都為1fr，那麼1fr 100 100px 3。單元格 行和列形成的區...
css grid布局使用
display grid 指定乙個容器採用網格布局 採用網格布局的區域，稱為 容器 container 容器內部採用網格定位的子元素，稱為 專案 item 一 容器屬性 預設情況下 容器元素都是塊級元素，但也可以設定成行內元素 display inline block note 設定網格布局後，容器...
CSS Grid 網格 布局
grid template columns grid template rows grid template areas grid template grid column gap grid row gap grid gap justify items align items justify con...