今天工作清閒時刷到grid布局，之前一直沒有關注，趁現在進行記錄一下，該文件主要是對翻閱的資料進行整理歸納
實際需求中經常有迴圈展示資料的情況，以前一直用float，flex等方式，但如果在一些複雜的網頁結構中，grid要更加靈活。
對於居中（特別是垂直居中）問題、還有元素的一維分布（一條線上如何分布），用flex再合適不過了。
如果涉及到二維（多行多列）確定的布局，使用grid。
涉及到響應式的頁面元素，使用flex + width百分比寬度簡直太好用，因為flex天生的流式布局
grid布局在2023年由microsoft提出，目前已經成為w3c候選標準，目前還不能用於生產環境,但可以通過設定瀏覽器來看到效果，在chrome中位址列中輸入chrome://flags開啟瀏覽器實驗網路平台功能，將experimental web platform features設定為enable，這樣我們就可以正常使用grid,如果要在專案中使用grid布局，可以安裝 css-grid-polyfill
列舉一些重要屬性
display: grid定義乙個網格容器
屬性含義
屬性值display
定義乙個網格容器
grid 以塊級元素的形式顯示;inline-grid 以內聯元素的形式顯示;subgrid 父級網路容器的乙個子項，行和列的大小都從父級獲取
grid-template-columns
網格的行數
自定義網格的寬高，單位可以是(px,em,rem,vw,vh,百分比），也可以是網格中自由空間的份數（單位fr）;定義網格線的名稱，不是必須值，未設定以數字表示
grid-template-rows
網格的列數
自定義網格的寬高，單位可以是(px,em,rem,vw,vh,百分比），也可以是網格中自由空間的份數（單位fr）;定義網格線的名稱，不是必須值，未設定以數字表示
grid-column-gap
定義網格之間的間距（不包括網格專案到容器邊緣的間距）
grid-row-gap
定義網格之間的間距（不包括網格專案到容器邊緣的間距）
還有一些自適應特性
fraction單位，fraction單位通常簡寫為fr，它允許你根據需要將容器拆分為多個塊，例：grid-template-columns: 1fr 1fr 1fr;
repeat()函式，跟蹤列表的重複片段，允許大量顯示重複模式的列或行以更緊湊的形式編寫。見下方九宮格例項
fit-content(), 內容適配,根據公式min（最大大小、最大值（最小大小、引數））將給定大小夾緊為可用大小
.container.containerminmax() minmax()函式定義的範圍大於或等於 min， 小於或等於 max。
.container經典九宮格
// html12
3456
789// css
.container
.container div
// html
header
left
center
right
footer
// css
.box
.header
.content
.footer
.left
.center
.right
// html
aaabbb
cccddd
aaabbb
cccddd
// css
.box
.key
.value
布局篇 Grid布局
特點 1 可以定義任意數量的行和列 2 行的高度和列的寬度可以使用絕對值 相對比例或自動調整的方式，可設定最大值和最小值 3 內部元素可以設定自己所在的行 列，還可以設定跨越幾行 幾列 4 可以設定內部元素的對齊方向 grid類具有columndefinitions和rowdefinitions兩個...
Grid布局方式
wp7中grid布局類似html中的 但是又不太一致 為了測試新乙個3行3列的grid 方了方便,剔除掉其它xaml c sharp collapse view plain copy layoutroot showgridlines true r1 r2 r3 c1 c2 c3 行分別命名為r1,r...
grid布局小結
定義grid容器的方式 display grid 或者display inline grid 行內塊元素 容器屬性 舉例 container舉例 container舉例 舉例 container container containergrid template屬性是grid template col...