Невозможно понять взаимосвязь между компонентами MDL Layout и MDL Grid.

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

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, но использовал угловой материал и присматривался к нему для будущих проектов.