grid布局小結

2022-05-18 08:26:45 字數 967 閱讀 5389

定義grid容器的方式

display: grid;

或者display:inline-grid;//行內塊元素

容器屬性

舉例:

.container
舉例:

.container
舉例:

舉例:

.container

.container

.container
grid-template屬性是grid-template-columnsgrid-template-rowsgrid-template-areas這三個屬性的合併簡寫形式。

grid屬性是grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow這六個屬性的合併簡寫形式。從易讀易寫的角度考慮,還是建議不要合併屬性,所以這裡就不詳細介紹這兩個屬性了。

專案屬性

指定專案位置

網格線在沒定義的情況下 從左到右 從1開始遞增   從上到下 從1開始遞增

簡寫舉例:

.item

.item

.item

布局篇 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布局,之前一直沒有關注,趁現在進行記錄一下,該文件主要是對翻閱的資料進行整理歸納 實際需求中經常有迴圈展示資料的情況,以前一直用float,flex等方式,但如果在一些複雜的網頁結構中,grid要更加靈活。對於居中 特別是垂直居中 問題 還有元素的一維分布 一條線上如何分布...