grid用起來很簡單
就是用網格來設計布局
看看**
aaa
bbbccc
ddd
我們只考慮我們的容器中需要幾個子專案,,直白的說,就是幾個方框
比如我這裡就是1個容器中包含了4個div,也就是4個子專案,,也就是4個方塊
然後我們來寫css
.div01display為grid,也就是grid布局
grid-template-columns也就是幾列,我這邊是4列, 所以需要寫100px, 100px, 100px, 100px
這樣寫太麻煩,可以直接寫成 repeat(4,100px)
grid-template-rows是幾行,道理是一樣的
然後是grid-template-areas,
這個是用來表示布局如何分配,如何分布,就像乙個草圖一樣
"a . . . "
"b b . . "
"c . d d "
". . d d ";
右下角用了4個格仔來表示d,所以d占用了4個格仔
.div02
.div03
.div04
.div05
.item
指定a,b,c,d
然後我們來看一下顯示效果
果然和我們的areas草圖是一樣的
然後我們加上一些間距gap
然後我們拿大學網頁來舉個例子
我們看到這個主頁是這樣的
那麼我們可以試著畫出草圖
"a a a a a a"
"a a a a a a"
"a a a a a a"
"b b b c c c"
"b b b c c c"
"d d d d d d"
"d d d d d d"
"e e f f g g"
"e e f f g g"
草圖大概是這樣
我們看到,一共是6列,9行
那麼columns和rows是這樣
grid-template-columns: repeat(6, 100px);然後我們來寫**grid-template-rows: repeat(9, 100px);
html
aaa
bbbccc
dddeee
fffggg
.container
.div01
.div02
.div03
.div04
.div05
.div06
.div07
.item
和設計圖很像了,可以再略微調整一下尺寸就可以了
Grid 網格布局詳解
grid布局與flex布局有著一定的相似性，grid布局是將容器劃分成行和列，產生單元格，可以看做是二維布局。採用網格布局的區域，稱為 容器 container 容器內部採用網格定位的子元素，稱為 專案 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...