從MDL website MDL佈局和MDL網格組件之間的關係：無法理解
佈局道：「MDL佈局組件是一個全面的方法來頁面佈局使用MDL開發原則，可實現有效的使用MDL組件，並自動適應不同的瀏覽器，屏幕尺寸和設備。「
更進一步 -
「MDL佈局原則的使用通過提供可重用組件並通過建立可識別的視覺元素，遵循邏輯結構網格並在多個平臺和屏幕尺寸之間保持適當的間距來鼓勵環境間的一致性，從而簡化了可縮放頁面的創建「。
網格：「MDL網格組件是爲多個屏幕尺寸佈置內容的簡化方法。」
因此，從Layout的上述定義中，似乎包含了網格行爲。無法理解如何。
我找不到任何使用MDL網格和佈局的示例。
那麼，它們在某種程度上是相互排斥的嗎？這兩者如何相關？使用每種方法的最佳實踐是什麼？
請幫我理解。謝謝。
MDL佈局是容納包含在mdl-layout類和它基本上是項目結構之間的不同組件的容器。想象它作爲建築物的外牆。
MDL Grid是一個12列的網格系統，您可以在其中專門選擇在頁面上佈局某些組件的位置。它們被包含在mdl-grid，mdl-cell，mdl-cell-＃-col類中。把它想象成建築物內的傢俱並決定把它放在哪裏。
它們的不同之處在於MDL Layout並非真正的佈局工具，因此您可以指定組件的位置。它是什麼，它爲您提供可以實施到您的項目，如導航欄，抽屜，頁腳等的積木。它意味着什麼時它說：
「MDL佈局組件是一個全面的使用MDL開發原則的頁面佈局 的方法，可以有效使用MDL 組件，並自動適應不同的瀏覽器，屏幕 大小和設備。「
是在不同尺寸的屏幕上查看時，它會自動調整某些組件，而無需爲不同設備創建媒體查詢的麻煩。例如，當桌面顯示它時（如果指定的話），抽屜會隱藏在手機中。或者只有桌面將有一個導航/標題欄，而手機不會。甚至導航/標題欄將固定在桌面/手機上，其他人將隨屏幕滾動。
但是，MDL Grid是一種在頁面上佈局其他內容的方法。您想在桌面上並排放置兩件東西，並在手機上查看它時是否崩潰？ MDL Grid可以做到這一點。想要在桌面上並排顯示三張照片，然後在電話上查看它時摺疊顯示在不同的行上？ MDL Grid可以做到這一點。 MDL Grid不提供預構建組件。這只是一個指定在頁面上放置東西的工具。要查找更多信息，請查找12個網格系統。它應該闡明它。
提供的getmdl.io頁面上的博客模板已兩者正在一起選擇使用每一起：http://www.getmdl.io/templates/blog/index.html
偉大的答案，謝謝，甚至更多，因爲模板鏈接。 – logicalguy
MDL佈局將根據屏幕的顯示寬度動態地移動您創建的內容。
MDL Grid允許您通過設置不同屏幕尺寸的列數來定義始終可見的內容。
實施例，可以說你做出只是顯示一個頁面
（1，2，3，4）
在MDL-佈局如果觀看設備收縮它可能會改變此頁面顯示爲
（1，2，
3，4）
在MDL-格，如果你去了，寫了MDL-細胞 - 在自己的列4-COL-手機，每一個數字，沒有亞光如果視圖區域變得非常小（1,2,3,4）將總是以內聯方式顯示，即使其寬度縮小到無法讀取的程度，因爲您已定義了該屏幕尺寸的查看行爲。
因此，它們是相互排斥的，因爲您要麼允許MDL佈局組件決定以不同的視圖寬度顯示或使用MDL-Grid自行設置它們。也就是說，如果他們的行爲非常類似，我不會感到驚訝。我沒有使用過MDL-Lite，但已經使用了角度材質，並且一直在爲將來的項目而努力。
謝謝你，非常有見地。將不得不接受@ simulatron的答案更好，因爲它非常清楚地解釋了這兩個組件之間的關係，並在鏈接中提供了示例代碼。 – logicalguy
我沒有用太多MDL - 但是這個頁面（鏈接），它看起來像它的'佈局'只是用來包裝組件，就像引導程序中的'容器'一樣。請參閱底部的表格：https：//github.com/google/material-design-lite/tree/master/src/layout –
感謝您的鏈接@CodyReichert！ – logicalguy