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

if you work with Angular, instead of using grid you should rather use flexbox, Angular provides a package for it:

https://github.com/angular/flex-layout

A huge advantage using it is the fact that you can use typescript public variables to the flex-layout directives (you can't do that with bootstrap). It also includes Observables for media query changes.

Answer 2

I was looking for an answer for the same question. I see some great comments here. Few additions as of December 2016: Bootstrap does have Flexbox support now. Check this link also check this link to make bootstrap use Flexbox by default by just changing a flag or download bootstrap-flex.css. As far as, grid support in material goes, use a grid demo here, there is a material flex-layout engine which looks great (I haven't tried it yet). It is very close to bootstrap grid. Check this link.

Answer 3

Angular Material grid > Bootstrap grid, especially for Angular applications. Bootstrap grid uses float, which is outdated compared to flexible box model. float replaced the horrendous table layouts, but now flexible box model is starting to push float aside (for grid layouts). Just note that you need to add certain suffixes in your CSS for older browsers. See this CSS Tricks article for an example of how to implement flex for older browsers. Bootstrap grid applications also require you to create an endless amount of divs, which looks terrible and should be avoided in any application using HTML5. Technically, you could write your own Angular directives to replace certain divs, and group them based on what or how they display, but then why not just use Angular Material when they have already done that for you?

Answer 4

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.

Answer 5

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 6

Materialize is a modern responsiveCSS framework based on Material Design by Google.

And

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.

So if you want new modern design i think you should go with material design. It has very nice animation too.