網(wǎng)格列表是一種標(biāo)準(zhǔn)列表視圖的可選組件。網(wǎng)格列表與應(yīng)用于布局和其他可視視圖中的網(wǎng)格有著明顯的區(qū)別。
網(wǎng)格列表最適合用于同類數(shù)據(jù)（homogeneous data type），典型的如圖片，并且對(duì)可視化理解（visual comprehension ）和相似數(shù)據(jù)類型的區(qū)別進(jìn)行了優(yōu)化。
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-usage-spec_grid_drawings_01_large_mdpi.png" alt="" />
網(wǎng)格列表是一個(gè)連續(xù)元素（continuous element），該元素由棋盤式、規(guī)律性的小格子構(gòu)成，通常稱這些格子為單元格（cells）,單元格中包含有瓦片（tiles）。
單元格在網(wǎng)格中以垂直和水平的方式排列。
瓦片用以存放內(nèi)容，并且可以跨越一個(gè)或者多個(gè)垂直或者水平的單元格。
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-usage-spec_grid_drawings_02a_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-usage-spec_grid_drawings_02b_large_mdpi.png" alt="" />
如果瓦片中的文本需要與其他主要內(nèi)容有著足夠顯著的區(qū)別，可以考慮使用一個(gè)容器，比如列表（Lists）或者卡片（Cards）。這樣可以優(yōu)化文本顯示、增強(qiáng)閱讀理解的便利性。
Lists：增強(qiáng)閱讀理解的便利性，尤其是在比較一組具有多種數(shù)據(jù)類型的數(shù)據(jù)時(shí)。
Cards：用于不同格式的內(nèi)容，比如帶有不同長(zhǎng)度標(biāo)題的圖片;用于不同類內(nèi)容的數(shù)據(jù)集合中，比如具有圖片、視頻和圖書(shū)的混合式數(shù)據(jù)集。
瓦片內(nèi)容包括主要內(nèi)容（primary content）和次要內(nèi)容(secondary content)。主要內(nèi)容是有著重要區(qū)別的內(nèi)容，典型的如圖片。次要內(nèi)容可以是一個(gè)動(dòng)作按鈕或者文本。
為瓦片內(nèi)容提供一個(gè)默認(rèn)圖片。
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-content-spec_grid_drawings_03_large_mdpi.png" alt="" />
主要內(nèi)容和次要內(nèi)容中的動(dòng)作--比如播放、放大、刪除或者選擇--是一種瞬時(shí)性動(dòng)作，通常不會(huì)在網(wǎng)格列表中彈出選項(xiàng)子菜單（動(dòng)作溢出列表，action voerflow）。
動(dòng)作可以打開(kāi)一個(gè)隨后的視圖，比如卡片或者懸浮卡片（hovercard）。
主要?jiǎng)幼?/strong>
次要?jiǎng)幼骰蛘邇?nèi)容
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-content-spec_grid_drawings_04_large_mdpi.png" alt="" />
網(wǎng)格典型的滾動(dòng)只有垂直滾動(dòng)。
水平滾動(dòng)的網(wǎng)格是不鼓勵(lì)使用的，這通常與用戶的閱讀習(xí)慣有關(guān)，影響閱讀上的理解。
砍去網(wǎng)格瓦片來(lái)通知內(nèi)容未結(jié)束。
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-behavior-spec_grid_drawings_06_large_mdpi.png" alt="" />
要
（圖片用來(lái)）說(shuō)明砍去網(wǎng)格瓦片提示內(nèi)容未結(jié)束
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-behavior-spec_grid_drawings_05_large_mdpi.png" alt="" />
不要
不允許使用輕掃(swipe)手勢(shì)。選中并移動(dòng)(pick-up-and-move)動(dòng)作不鼓勵(lì)使用。
網(wǎng)格列表中的內(nèi)容可以編程實(shí)現(xiàn)其過(guò)濾和排序，比如通過(guò)數(shù)據(jù)類型、文件大小、字母順序或者其他參數(shù)等。
網(wǎng)格中的第一個(gè)條目置于網(wǎng)格的左上角，并且其順序?yàn)閺淖蟮接?，自上而下?/p>
重置網(wǎng)格列表的尺寸會(huì)導(dǎo)致瓦片在有水平空間可用時(shí)重新排序。但是瓦片并不會(huì)縮放以填充可用的水平空間。
當(dāng)水平空間受限時(shí)，網(wǎng)格列表不會(huì)轉(zhuǎn)換為列表。網(wǎng)格列表與列表在強(qiáng)調(diào)不同數(shù)據(jù)類型的不同結(jié)構(gòu)：圖片優(yōu)于文本與文本優(yōu)于圖片的區(qū)別。
單行表頭/表尾
高： 48dp
文本內(nèi)邊距： 16dp
默認(rèn)字體大?。?16sp
次要?jiǎng)幼髋c尾右對(duì)齊
兩行表頭/表尾
高： 68dp
文本內(nèi)邊距： 16dp
每行的默認(rèn)字體大小： 16sp/12sp或者14sp/14sp
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-Grid_footer_overview_01a_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-Grid_footer_overview_01b_large_mdpi.png" alt="" />
網(wǎng)格內(nèi)邊距： 4dp
網(wǎng)格列表中的瓦片可以跨多列。
仔細(xì)考慮網(wǎng)格列表中的次要文本是否需要使用多列瓦片，因?yàn)榇蟮耐咂赡軙?huì)造成很大的空間浪費(fèi)。
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-imageOnlyGrid_01_large_mdpi.png" alt="" />
元素
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-imageOnlyGrid_03_large_mdpi.png" alt="" />
僅有文本
高: 48dp
文本內(nèi)邊距： 16dp
默認(rèn)字體大?。?16sp
網(wǎng)格內(nèi)邊距： 4dp
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-SingleLineGrid_01a_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-SingleLineGrid_01b_large_mdpi.png" alt="" />
元素
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-SingleLineGrid_02_large_mdpi.png" alt="" />
帶圖標(biāo)的文本
高： 48dp
文本內(nèi)邊距： 16dp
默認(rèn)字體大?。?16sp
網(wǎng)格內(nèi)邊距： 4dp
網(wǎng)格列表表尾或者表頭的中的次要文本可以右對(duì)齊或左對(duì)齊。
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-SingleLineGrid_03a_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-SingleLineGrid_03b_large_mdpi.png" alt="" />
元素
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-SingleLineGrid_03c_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-SingleLineGrid_03d_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-SingleLineGrid_04_large_mdpi.png" alt="" />
僅有文本
高： 68dp
文本內(nèi)邊距： 16dp
每行的默認(rèn)字體大小： 16sp/12sp或14sp/14sp
網(wǎng)格內(nèi)邊距： 4dp
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-TwoLineGrid_01a_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-TwoLineGrid_01b_large_mdpi.png" alt="" />
元素
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-TwoLineGrid_02_large_mdpi.png" alt="" />
內(nèi)容
帶有圖標(biāo)的文本
高： 68dp
文本內(nèi)邊距： 16dp
每行的默認(rèn)字體大?。?16sp/12sp 或 14sp/14sp
網(wǎng)格列表表尾或者表頭中的次要文本可以右對(duì)齊或左對(duì)齊。
網(wǎng)格內(nèi)邊距是4dp
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-TwoLineGrid_03a_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-TwoLineGrid_03b_large_mdpi.png" alt="" />
元素
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-TwoLineGrid_03c_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-TwoLineGrid_03d_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-TwoLineGrid_04_large_mdpi.png" alt="" />
內(nèi)容
原文：Grids 翻譯：CodeDiving 校對(duì)：huanglizhuo
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多
