Grid網格布局

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

可以使用repeat()

repeat(3, 33.33%)，定義三列，每一列為33.33%寬

repeat(2, 100px 20px 80px)，定義了六列，第1列和第4列為100px，第二列和第5列為20px…

repeat(auto-fill, 100px)，表示不固定大小的容器，希望一行盡量放慢專案，每個專案為100px

還可以使用fr，比例關係，100px 1fr 2fr，第一列為100px，剩餘部分分為3份，第二列佔2份，第三列佔1份。

1fr 1fr minmax(100px, 1fr)，容器寬度為280px時，此時三列每個都100px，則不夠，所以就最後乙個為100px，剩餘部分前兩個平分；

1fr 1fr minmax(100px, 200px)如果容器寬度為400px時，第三列為200px，剩餘部分平分

1fr 1fr minmax(100px, 300px)，容器寬度為280px時，？？？？？❓❓❓❓❓

auto，100px auto 100px ，表示第一列為100px，第三列為100px，第二列自適應

.parent

Grid網格布局

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

grid網格布局

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

Grid網格布局

將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局 grid 布局與 flex 布局有一定的相似性，都可以指定容器內部多個專案的位置。但是，它們也存在重大區別。flex 布局是軸線布局，只能指定 專案 針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產...