Grid網格布局

看文總結部分。。

flex 布局是軸線布局，只能指定"專案"針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成"行"和"列"，產生單元格，然後指定"專案所在"的單元格，可以看作是二維布局。

行 （row） 列（column）

設為網格布局以後，容器子元素（專案）的float、display: inline-block、display: table-cell、vertical-align和column-*等設定都將失效。

grid-template-columns屬性定義每一列的列寬，grid-template-rows屬性定義每一行的行高。可以設定百分比，如果相同的可以用repeat，grid-template-columns:repeat(33.3%),auto-fill不知寬高可以自動填充，直到容器不能放置更多的列

.container

grid-row-gap屬性設定行與行的間隔（行間距），grid-column-gap屬性設定列與列的間隔（列間距）。grid-gap屬性是（grid-row-gap，grid-column-gap）和的合併簡寫形式

Grid網格布局

前言 就目前為止，css的grid和flexbox結合將是解決布局的最佳方案。雖然瀏覽器對css grid和flexbox的屬性未完全支援，但對於實現布局而言，這已是一種非常完美的結合。如果css box alignment module level3能得到更好的支援的話，那麼對於web的布局將是一...

Grid網格布局

flex 布局是軸線布局，只能指定 專案 針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產生單元格，然後指定 專案所在 的單元格，可以看作是二維布局。grid 布局遠比 flex 布局強大。可以使用repeat repeat 3,33.33 定義三列，每一列為33....

grid網格布局

1.1 容器和專案 採用網格布局的區域，稱為 容器 container 容器內部採用網格定位的子元素，稱為 專案 item 1.2 行和列 容器裡面的水平區域稱為 行 row 垂直區域稱為 列 column 1.3 單元格 行和列的交叉區域，稱為 單元格 cell 正常情況下，n行和m列會產生n x...