How does the Grid System work in Angular Material Design?

Question

In the documentation of Angular Material Design has a component called Grid List, which, I imagine, is the structuring part of the layout, but it only has two very simple examples and I couldn’t understand its use, so...

1. I’m sure that’s what Grid List is all about?
2. If not what would be the component for this or should I do in hand?
3. How to use?
4. In Material Design Lite used to use the classes, for example, mdl-cell--10-col mdl-cell--1-offset in a container so that the elements do not stick to the edge, how to do the same at the angle?

Answer 1

You can use the Material Grid List, to make a column layout responsive in conjunction with the Angular Flex Layout, but you’ll need a little code.

TL;DR; Go to the link more detailed than the example below.

The Angular Flex Layout uses breakpoints to detect screen size:

• Xs - max-width: 599px;
• gt-Xs - min-width: 600px;
• Sm - min-width: 600px; max-width: 959px;
• gt-Sm - min-width: 960px;
• Md - min-width: 960px; max-width: 1279px;
• gt-Md - min-width: 1280;
• lg - min-width: 1280px; max-width: 1919px;
• gt-lg - min-width: 1920px;
• Xl - min-width: 1920px; max-width: 5000px;

You can use them to set a layout, fxLayout, in lines(row) or columns(column), or even visibility of objects with fxShow and fxHide, as below:

<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="center stretch" class="row-example">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div fxShow="true" fxHide.xs="true"></div>
</div>

In the angular code of its component, to detect the breakpoints, you need a service called ObservableMedia, which is installed with the Angular Flex Layout package, below the steps followed by an example:

$ npm install @angular/flex-layout --save

You need to import the module into your app.module:

...
import { FlexLayoutModule } from "@angular/flex-layout";

@NgModule({
  imports: [
    BrowserModule,
    FlexLayoutModule
  ],
  declarations: [ App ],
  bootstrap: [ App ]
})

So in the components that want to use the responsive layout, you need to inject the service ObservableMedia. In the example below, using the mat-grid-list, we can use the ObservableMedia to set how many columns are displayed per row:

HTML

<mat-grid-list [cols]="cols | async" gutterSize="16px">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>5</mat-grid-tile>
</mat-grid-list>

TS

public cols: Observable<number>;

  constructor(private observableMedia: ObservableMedia) {}

  ngOnInit() {
    const grid = new Map([
      ["xs", 1],
      ["sm", 2],
      ["md", 2],
      ["lg", 3],
      ["xl", 3]
    ]);
    let start: number;
    grid.forEach((cols, mqAlias) => {
      if (this.observableMedia.isActive(mqAlias)) {
        start = cols;
      }
    });
    this.cols = this.observableMedia.asObservable()
      .map(change => grid.get(change.mqAlias))
      .startWith(start);
  }

In the code above in map grid, are defined the Media Query Alias, maids, who map the breakpoints of the screen sizes, and associates the same to the number of columns desired.

In ngOnInit, component initialization, we detected which breakpoint is active to set the initial column number.

Finally, we start a Observable to monitor service-enabled screen size changes ObservableMedia, the last change, we adjusted the size of the columns.

Source: https://brianflove.com/2017/05/03/responsive-angular/

Answer 2

The Angular Material Project feature list has no Grid System, be it by columns, flexbox or some other method. This component Grid List is nothing more than a resource to facilitate the implementation of a mosaic of images for example, but it does not serve as a structure of grids for a layout in itself.

As a solution, I recommend that you install Angular Flex Box providing a sophisticated Grids Layout API using Flexbox CSS and Mediaquerys.