Grid是前端開發(fā)中非常常用的一種布局方式,其基本思想是將頁面分為若干個(gè)網(wǎng)格,然后通過對(duì)網(wǎng)格的寬度、高度等屬性進(jìn)行調(diào)整來實(shí)現(xiàn)布局的目的。
使用Grid布局常需要定義各個(gè)網(wǎng)格的屬性,而這些屬性可以使用JSON格式進(jìn)行傳遞。Grid JSON的格式通常如下:
{ "grid": [ { "x": 0, "y": 0, "w": 2, "h": 2, "i": "0" }, { "x": 2, "y": 0, "w": 2, "h": 4, "i": "1" }, { "x": 4, "y": 0, "w": 2, "h": 3, "i": "2" }, { "x": 0, "y": 2, "w": 2, "h": 2, "i": "3" }, { "x": 2, "y": 4, "w": 2, "h": 2, "i": "4" }, { "x": 4, "y": 3, "w": 2, "h": 2, "i": "5" } ] }
其中,每一個(gè)元素代表一個(gè)網(wǎng)格,包括以下屬性:
- x:該網(wǎng)格的橫向起始位置
- y:該網(wǎng)格的縱向起始位置
- w:該網(wǎng)格的寬度(以網(wǎng)格數(shù)量計(jì)算)
- h:該網(wǎng)格的高度(以網(wǎng)格數(shù)量計(jì)算)
- i:該網(wǎng)格的id
使用Grid JSON可以方便地定義頁面布局,對(duì)于傳遞數(shù)據(jù)和調(diào)整界面都十分方便。
上一篇html寬度不限的代碼
下一篇mysql去處null