In the documentation of the Angular Material Design has a component called Grid List, which, I imagine, is the design part of the layout, but it only has two very simple examples and I could not understand its usage, so ...
mdl-cell--10-col mdl-cell--1-offset in a container so that the elements are not glued to the edge, how to do the same in the angle? You can use the Material Grid List to make a column layout responsive together with Angular Flex Layout , but you'll need some code.
TL; DR; Go to the link reference, in English, more detailed than the example below.
The Angular Flex Layout uses breakpoints to detect the size of the screen:
You can use them to define a layout, fxLayout , in rows ( row ) or columns ( column ), or even visibility of objects with fxShow and fxHide , as below: / p>
<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 part of your component, to detect 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 ]
})
Then on the components that want to use the responsive layout, you need to inject the ObservableMedia service. In the example below, using mat-grid-list , we can use ObservableMedia to define how many columns are displayed per line:
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 above code in% w /% w /%, the Media Query Alias , maAlias, is mapped to the breakpoints of screen sizes, and associates the same number of columns.
In map , initialization of the component, we detect which breakpoint is active to define the initial number of columns.
Finally, we initialize a grid to monitor screen size changes activated by the ngOnInit service, every time we change, we adjust the size of the columns.
Source: link
The resource list of the Angular Material Project does not have any Grid System, be it by columns, flexbox or some other method. This component Grid List is nothing more than a feature to facilitate the implementation of a mosaic of images for example, but it does not serve as a grid structure for a layout itself.
As a workaround, I recommend that you install the Angular Flex Box into your project that provides a sophisticated Layout Grids API using Flexbox CSS and MediaQuery.