does angular material have a grid system?

Question

I'm starting a project with angular material. Does it have a native system for positioning elements in a responive grid like bootstrap does ?

Otherwise is it ok practice to combine material design with bootstrap for the grid system ?

Maybe I am taking the wrong aproach to the problem.

Answer 1

If you are using Material2, you can use Angular Flex Layout for responsiveness. It compliments Angular2 well and is lightweight.

Basically Material2 + Flex-layout is equivalent to Bootsrap library.

Here's an example of how flex-layout can be used for grid system/responsiveness with Angular/Material2.

Sample Code showing use of flex-layout API:

<div fxShow.xs="true" fxShow="false" >Screen size <h1>XS</h1></div>     <div fxShow.sm="true" fxShow="false" >Screen size <h1>SM</h1></div>     <div fxShow.md="true" fxShow="false" >Screen size <h1>MD</h1></div>     <div fxShow.lg="true" fxShow="false" >Screen size <h1>LG</h1></div>     <div fxShow.xl="true" fxShow="false" >Screen size <h1>XL</h1></div>      <div fxLayout="row"           fxLayout.xs="column"          fxLayoutGap="10px"          fxLayoutAlign.xs="center center"          fxLayoutWrap>       <div class="sample-div" fxFlexOrder.lt-md="7">Div 1</div>       <div class="sample-div" fxFlexOrder.lt-md="6">Div 2</div>       <div class="sample-div" fxFlexOrder.lt-md="5">Div 3</div>       <div class="sample-div" fxFlexOrder.lt-md="4">Div 4</div>       <div class="sample-div" fxFlexOrder.lt-md="3">Div 5</div>       <div class="sample-div" fxFlexOrder.lt-md="2">Div 6</div>       <div class="sample-div" fxFlexOrder.lt-md="1">Div 7</div>       <div class="sample-div" fxFlexOrder.lt-md="0">Div 8</div>     </div>