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 practic

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>

Answer 2

This site describes how to add the bootstrap grid to a Angular Material project: https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/

A summary of the steps described in the article:

Add bootstrap to your project:

npm install bootstrap --save

src/styles.scss:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

@import 'variables';

// Imports functions, variables, and mixins that are needed by other Bootstrap files
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
// Import Reboot
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/grid'; // add the grid
@import '~bootstrap/scss/utilities'; // add css utilities

@import 'reset';

src/_variables.scss:

The _variables.scss Sass partial allows us to customize Bootstrap - more precisely, the parts of Bootstrap that we will be using

$link-color: #3f51b5;
$link-hover-color: currentColor;
$link-hover-decoration: none;

$grid-breakpoints: (
  xs: 0, // handset portrait (small, medium, large) | handset landscape (small)
  sm: 600px, // handset landscape (medium, large) | tablet portrait(small, large)
  md: 960px, //  tablet landscape (small, large)
  lg: 1280px, // laptops and desktops
  xl: 1600px // large desktops
);

$container-max-widths: (
  sm: 600px,
  md: 960px,
  lg: 1280px,
  xl: 1600px
);

src/_reset.scss:

The _reset.scss Sass partial allows us to override some of the Bootstrap styles we don't want

* {
  &:active,
  :focus {
    outline: none !important;  // 1
  }
}

label {
  margin-bottom: 0; // 2
}


a:not(.mat-button):not(.mat-raised-button):not(.mat-fab):not(.mat-mini-fab):not([mat-list-item]) {
  color: #3f51b5; // 3
}

Answer 3

Looks like Angular Material (7.0.3) still do not have solid grid system like bootstrap, else they would have included it in their official documentation

and we still need to use Anuglar Material because of richer UI/UX.

solution is to take only grid part from bootstrap.

stylesheetbootstrap-grid.css can be used as mentioned in bootstrap documentation or corresponding cdn can be used to utilize bootstrap provided grid functionality.