angular material grid system

Question

I am confused with angular material design and material css. Why do both have different layout and grids? What is the equivalent for bootstrap container in angular material design?

Shall I use angular material design for my project comparing with bootstrap?

Answer 1

The main reason to go with Angular Material is because it is based on Flexible Box Layout specification, witch is a W3C standard Flexible Box.

The closer tag for bootstrap container could be: <div layout="row" layout-wrap></div>

Answer 2

Angular Material Design does not have an exact equivalent to a Bootstrap container because Material Design (AMD) is more flexible. A container has 8 sections. AMD has the layout and flex attributes. AMD's flex can increment by 5% (20 sections in BS) or by 33 and 66 (2 sections) or by combinations of 5%, 33% and 66%, which can go to more than 100% (most any number of sections) in which case multiple lines are automatically created. The best single page with examples that I've found, so far, is https://material.angularjs.org/#/layout/grid Click on the Source box above each example to get more specifics about AMD's HTML syntax for layout and flex.

You have further flexibility via Child Alignment, which controls spacing between each div in horizontal and vertical. Click the radio buttons on that page to see how divs are centered, or spread, or pushed to one end, or lifted to the top, etc.

The HTML syntax displayed will work on a set sized page. If you want the equivalent of media-queries to change sizes for different devices, you have some further coding to do to make angular controllers. Look at the DEMOS examples for various components to get an idea.