无法理解 MDL 布局和 MDL 网格组件之间的关系
Not able to understand the relationship between MDL Layout and MDL Grid components
来自MDL website：
布局："The MDL Layout component is a comprehensive approach to page layout that uses MDL development tenets, allows for efficient use of MDL components, and automatically adapts to different browsers, screen sizes, and devices."
再往前-
"Use of MDL layout principles simplifies the creation of scalable pages by providing reusable components and encourages consistency across environments by establishing recognisable visual elements, adhering to logical structural grids, and maintaining appropriate spacing across multiple platforms and screen sizes."
网格："The MDL Grid component is a simplified method for laying out content for multiple screen sizes."
所以，从上面的布局定义来看，似乎包含了网格行为。无法理解如何。
我找不到任何同时使用 MDL 网格和布局的示例。
那么，它们在某种程度上是相互排斥的吗？两者有什么关系？将每种方法结合使用或相互结合使用的最佳做法是什么？
请帮我理解。谢谢
MDL 布局将根据屏幕的显示宽度动态移动您创建的内容。
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 自行设置。也就是说，如果他们对 class'
的行为非常相似，我不会感到惊讶
免责声明，我从未使用过 MDL-Lite，但使用过 angular-material 并且一直在关注它以用于未来的项目。
MDL 布局是包含不同组件的容器，这些组件包含在 mdl 布局 class 之间，它本质上是项目的结构。把它想象成建筑物的外墙。
MDL Grid 是一个 12 列网格系统，您可以在其中专门选择在页面上布局某些组件的位置。它们包含在 mdl-grid、mdl-cell、mdl-cell--#-col classes 中。将其想象成建筑物内的家具并决定将其放置在何处。
它们的不同之处在于 MDL 布局并不是真正的布局工具，因此您可以指定组件的位置。它是什么，它为您提供了可以在您的项目中实现的构建块，例如导航栏、抽屉、页脚等。它的意思是：
"The MDL Layout component is a comprehensive approach to page layout
that uses MDL development tenets, allows for efficient use of MDL
components, and automatically adapts to different browsers, screen
sizes, and devices."
是在不同尺寸的屏幕上观看时，它会自动调整一些组件，而无需为不同的设备创建媒体查询的麻烦。一个例子是抽屉将隐藏在 phone 上，而桌面会显示它（如果指定）。或者只有桌面会有 nav/header 栏，而 phone 不会。或者甚至 nav/header 栏将固定在 desktop/phone 上，而其他栏将随屏幕滚动。
但是，MDL 网格是一种在页面上布局其他内容的方法。您想在桌面上并排放置两个东西，然后在 phone 上查看时折叠起来？ MDL 网格就是这样做的。想要在桌面上并排显示三张照片，然后在 phone 上查看时折叠起来显示在不同的行上？ MDL 网格就是这样做的。 MDL Grid 不提供预建组件。它只是一个用于指定在页面上放置内容的工具。要查找更多信息，请查找 12 网格系统。它应该对它有所启发。
getmdl.io 页面上提供的博客模板将两者结合使用：http://www.getmdl.io/templates/blog/index.html
来自MDL website：
布局："The MDL Layout component is a comprehensive approach to page layout that uses MDL development tenets, allows for efficient use of MDL components, and automatically adapts to different browsers, screen sizes, and devices."
再往前-
"Use of MDL layout principles simplifies the creation of scalable pages by providing reusable components and encourages consistency across environments by establishing recognisable visual elements, adhering to logical structural grids, and maintaining appropriate spacing across multiple platforms and screen sizes."网格："The MDL Grid component is a simplified method for laying out content for multiple screen sizes."
所以，从上面的布局定义来看，似乎包含了网格行为。无法理解如何。
我找不到任何同时使用 MDL 网格和布局的示例。
那么，它们在某种程度上是相互排斥的吗？两者有什么关系？将每种方法结合使用或相互结合使用的最佳做法是什么？
请帮我理解。谢谢
MDL 布局将根据屏幕的显示宽度动态移动您创建的内容。
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 自行设置。也就是说，如果他们对 class'
的行为非常相似，我不会感到惊讶免责声明，我从未使用过 MDL-Lite，但使用过 angular-material 并且一直在关注它以用于未来的项目。
MDL 布局是包含不同组件的容器，这些组件包含在 mdl 布局 class 之间，它本质上是项目的结构。把它想象成建筑物的外墙。
MDL Grid 是一个 12 列网格系统，您可以在其中专门选择在页面上布局某些组件的位置。它们包含在 mdl-grid、mdl-cell、mdl-cell--#-col classes 中。将其想象成建筑物内的家具并决定将其放置在何处。
它们的不同之处在于 MDL 布局并不是真正的布局工具，因此您可以指定组件的位置。它是什么，它为您提供了可以在您的项目中实现的构建块，例如导航栏、抽屉、页脚等。它的意思是：
"The MDL Layout component is a comprehensive approach to page layout that uses MDL development tenets, allows for efficient use of MDL components, and automatically adapts to different browsers, screen sizes, and devices."
是在不同尺寸的屏幕上观看时，它会自动调整一些组件，而无需为不同的设备创建媒体查询的麻烦。一个例子是抽屉将隐藏在 phone 上，而桌面会显示它（如果指定）。或者只有桌面会有 nav/header 栏，而 phone 不会。或者甚至 nav/header 栏将固定在 desktop/phone 上，而其他栏将随屏幕滚动。
但是，MDL 网格是一种在页面上布局其他内容的方法。您想在桌面上并排放置两个东西，然后在 phone 上查看时折叠起来？ MDL 网格就是这样做的。想要在桌面上并排显示三张照片，然后在 phone 上查看时折叠起来显示在不同的行上？ MDL 网格就是这样做的。 MDL Grid 不提供预建组件。它只是一个用于指定在页面上放置内容的工具。要查找更多信息，请查找 12 网格系统。它应该对它有所启发。
getmdl.io 页面上提供的博客模板将两者结合使用：http://www.getmdl.io/templates/blog/index.html