来自MDL website：
布局：“MDL布局组件是一种全面的页面布局方法，它使用MDL开发原则，允许有效使用MDL组件，并自动适应不同的浏览器，屏幕尺寸和设备。” />
更进一步 -
“使用MDL布局原则通过提供可重用组件简化了可扩展页面的创建，并通过建立可识别的可视元素，遵循逻辑结构网格以及在多个平台和屏幕大小之间保持适当的间距来简化整个环境的一致性。”
网格：“MDL网格组件是一种简化的方法，用于为多种屏幕尺寸布置内容。”
因此，从上面的Layout定义来看，似乎包含了网格行为。无法理解如何。
我找不到任何一起使用MDL网格和布局的示例。
那么，它们是否相互排斥？这两者有什么关系？使用每种方法的最佳做法是一起使用还是一种方式使用？
请帮我理解。感谢。
答案 0 :(得分：2)
MDL Layout是容纳不同组件的容器，这些组件包含在mdl-layout类之间，它本质上是项目的结构。想象一下它是建筑物的外墙。
MDL Grid是一个12列网格系统，您可以在其中专门选择在页面上布置某些组件的位置。它们包含在mdl-grid，mdl-cell，mdl-cell - ＃ - col类中。想象一下这是建筑物内部的家具，并决定放在哪里。
它们的区别在于MDL Layout实际上不是一个布局工具，因此您可以指定组件的位置。它是什么，它为您提供了可以为项目实现的构建块，例如导航栏，抽屉，页脚等。它的含义如下：
“MDL Layout组件是一种全面的页面布局方法 使用MDL开发原则，允许有效使用MDL 组件，并自动适应不同的浏览器，屏幕 尺寸和设备。“
是在不同尺寸的屏幕上观看时，它会自动调整一些组件，而无需为不同的设备创建媒体查询的麻烦。一个例子是抽屉将隐藏在手机上，而桌面会显示它（如果指定）。或者只有桌面会有手机/标题栏，而手机则不会。或者甚至导航/标题栏将固定在桌面/手机上，而其他人则会在屏幕上滚动。
然而，MDL Grid是一种在页面上布局其他内容的方法。您想在桌面上并排制作两件事，在手机上查看时会崩溃吗？ MDL Grid就是这么做的。想要在桌面上并排显示三张照片，然后在手机上查看时折叠显示在不同的行上吗？ MDL Grid就是这么做的。 MDL Grid不提供预构建的组件。它只是一个工具，用于指定在页面上放置内容的位置。要查找更多信息，请查找12网格系统。它应该对此有所了解。
getmdl.io页面上提供的博客模板将两者结合使用：http://www.getmdl.io/templates/blog/index.html
答案 1 :(得分：0)
MDL Layout将根据屏幕的显示宽度动态移动您创建的内容。
MDL Grid允许您通过设置不同屏幕尺寸的列数来定义始终可见的内容。
示例，假设您创建了一个只显示
的页面（1,2,3,4）
如果查看设备收缩，则在MDL-Layout下可能会将此页面更改为显示为
（1,2，
3,4）
在MDL-Grid下如果你去写了mdl-cell-4-col-phone，每个数字都在自己的列中，无论视图区域有多小（1,2,3,4）都会显示内联即使其宽度减小到无法读取的程度，因为您已经定义了该屏幕尺寸的查看行为。
因此，它们是互斥的，因为您要么允许MDL布局组件决定在不同视图宽度下显示的内容，要么使用MDL-Grid自行设置。也就是说，如果他们在课堂上表现得非常相似，我不会感到惊讶。
免责声明，我从未使用过MDL-Lite，但使用了角度材料，并一直关注未来的项目。