Angular Material Grid List Example
April 11, 2021
On this page we will discuss creating Angular material Grid List. To create grid list we need to know following directives.
1. MatGridList
The selector for
MatGridList is mat-grid-list. The mat-grid-list is a two-dimensional list view that arranges cells into grid-based layout. Find the properties of mat-grid-list.
cols: Number of columns in grid list.
rowHeight: Sets row height. The row can be set with fixed height in px, em or rem. Row height can also be set in column-width:row-height ratio. The row height can also be specified as fit that automatically sets row height.
gutterSize: Gutter size in px, em, or rem units.
2. MatGridTile
The selector of
MatGridTile is mat-grid-tile. The <mat-grid-tile> is child element of <mat-grid-list> element. Find the properties of mat-grid-tile.
colspan: Number of columns that grid tile takes up.
rowspan: Number of rows that grid tile takes up.
3. MatGridTileText
The selector of
MatGridTileText is mat-grid-tile-header and mat-grid-tile-footer. The mat-grid-tile-header is used to create grid list header and mat-grid-tile-footer is used for footer.
Contents
Technologies Used
Find the technologies being used in our example.1. Angular 11.0.3
2. Angular Material 11.2.0
3. Node.js 12.5.0
4. NPM 6.9.0
Creating Grid List
To create grid list, we need to importMatGridListModule in our application module.
import { MatGridListModule } from '@angular/material/grid-list';
<mat-grid-list cols="2" rowHeight="100px"> <mat-grid-tile>A</mat-grid-tile> <mat-grid-tile>B</mat-grid-tile> <mat-grid-tile>C</mat-grid-tile> <mat-grid-tile>D</mat-grid-tile> </mat-grid-list>
Setting cols
The cols is the attribute of <mat-grid-list> element. The cols sets the number of columns in grid. It is mandatory to specify cols in <mat-grid-list>. The number of rows is automatically determined on the basis of number of columns and number of items.
<mat-grid-list cols="4"> ------ </mat-grid-list>
Setting rowHeight
The height of row in a grid list is set via rowHeight attribute. The rowHeight is calculated in following ways.
1. Fixed height: The
rowHeight can be assigned in px, em, or rem units such as 50px, 10em, 5rem etc. If there is no unit specified, the default is px unit.
<mat-grid-list cols="2" rowHeight="5em"> ------ </mat-grid-list>
rowHeight can be assigned as column-width:row-height such as 4:2. Find the example.
<mat-grid-list cols="2" rowHeight="4:2"> ------ </mat-grid-list>
rowHeight is not specified, it defaults to 1:1 ratio of column-width:row-height.
3. Fit: When we assign
rowHeight as fit, then available height is divided into number of rows automatically.
<mat-grid-list cols="2" rowHeight="fit"> ------ </mat-grid-list>
Setting gutterSize
Gutter size is the gap between columns. The gutterSize is an attribute in mat-grid-list element. The gutterSize can be set in px, em, or rem units. By default gutter size is 1px.
<mat-grid-list cols="4" rowHeight="50px" gutterSize="15px"> ------ </mat-grid-list>
Setting rowspan and colspan
We can set rowspan and colspan properties to <mat-grid-tile>. The value for colspan must be less or equal to cols in <mat-grid-list>. The value for rowspan can be any number.
<mat-grid-list cols="4" rowHeight="50px"> <mat-grid-tile colspan="3" rowspan="2">ABC</mat-grid-tile> ------ </mat-grid-list>
rowspan and colspan are not set, they both default to 1.
Grid List of Cards
Find the example of<mat-grid-list> with <mat-card>.
<mat-grid-list cols="2" rowHeight="50px">
<mat-grid-tile *ngFor="let card of cards">
<mat-card class="my-card">
<mat-card-title>{{card.title}}</mat-card-title>
<mat-card-content>
{{card.content}}
</mat-card-content>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
Complete Example
app.component.html
<h3>Using rowHeight</h3>
<mat-grid-list cols="2" rowHeight="50px">
<mat-grid-tile>A</mat-grid-tile>
<mat-grid-tile>B</mat-grid-tile>
<mat-grid-tile>C</mat-grid-tile>
<mat-grid-tile>D</mat-grid-tile>
</mat-grid-list>
<h3>Using gutterSize</h3>
<mat-grid-list cols="2" rowHeight="50px" gutterSize="15px">
<mat-grid-tile>A</mat-grid-tile>
<mat-grid-tile>B</mat-grid-tile>
<mat-grid-tile>C</mat-grid-tile>
<mat-grid-tile>D</mat-grid-tile>
</mat-grid-list>
<h3>Using rowspan and colspan</h3>
<mat-grid-list cols="4" rowHeight="50px">
<mat-grid-tile colspan="2" rowspan="2">A</mat-grid-tile>
<mat-grid-tile rowspan="2">B</mat-grid-tile>
<mat-grid-tile rowspan="2">C</mat-grid-tile>
<mat-grid-tile colspan="4">D</mat-grid-tile>
</mat-grid-list>
<h3>Grid List of Cards</h3>
<mat-grid-list cols="2" rowHeight="50px">
<mat-grid-tile *ngFor="let card of cards">
<mat-card class="my-card">
<mat-card-title>{{card.title}}</mat-card-title>
<mat-card-content>
{{card.content}}
</mat-card-content>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
cards = [
{title: 'Title 1', content: 'Content 1'},
{title: 'Title 2', content: 'Content 2'},
{title: 'Title 3', content: 'Content 3'},
{title: 'Title 4', content: 'Content 4'}
];
}
mat-grid-tile {
background: lavender;
}
.my-card {
background: lavender;
width: 100%;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatGridListModule,
MatCardModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Run Application
To run the application, find the steps.1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.
