From the MDL website:
Layout: "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."
Further ahead -
"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."
Grid: "The MDL Grid component is a simplified method for laying out content for multiple screen sizes."
So, from the above definition of Layout, it would seem that grid behaviour is included. Not able to understand how.
I could not find any examples that use an MDL Grid and Layout together.
So, are they somehow mutually exclusive? How are the two related? What are the best practices for using each, either together or one over the other?
Please help me understand. Thanks.
MDL Layout is the container that holds different components that are enclosed between the mdl-layout class and it's essentially the structure of the project. Imagine it as outer walls to a building.
MDL Grid is a 12 column grid system where you can specifically choose where to layout certain components on the page. These are enclosed in the mdl-grid, mdl-cell, mdl-cell--#-col classes. Imagine this as the furniture inside a building and deciding where to put it.
How they differ is that MDL Layout isn't really a layout tool so you can specify where a component goes. What it is is it provides you building blocks that you can implement to your project such as a nav bar, a drawer, footer, etc. What it means when it says:
"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."
is that when viewing on different sized screens, it will adjust some components automatically without the hassle of creating media queries for different devices. An example would be the drawer will be hidden on a phone while the desktop would show it (if specified). Or only the desktop will have a nav/header bar while the phone won't. Or even the nav/header bar will be fixed on desktop/phone while the others will scroll with the screen.
MDL Grid, however, is a way to layout your other content on the page. You want to make two things side by side on the desktop and collapse when viewing it on a phone? MDL Grid does that. Want to show three photos side by side on the desktop and then collapse to show it on different rows when looking at it on a phone? MDL Grid does that. MDL Grid doesn't provide the prebuilt components. It's just merely a tool for specifying where to lay stuff out on the page. To find more information, look for the 12 grid system. It should shed some light on it.
The blog template provided on the getmdl.io page has both of them being used in conjuction with each together: http://www.getmdl.io/templates/blog/index.html