Angular Material 2 : How to style an md-grid-tile?

mat-grid-tile align
mat-grid-tile width
angular material grid
mat-grid-list responsive
mat-grid-tile' is not a known element
angular material two column layout
colspan in angular material
 <md-grid-list cols="3" >
  <md-grid-tile style="overflow : scroll;align-items: initial;">

    <app-general style="padding-left : 1em;" ></app-general>

  <md-grid-tile class="dummy" style="overflow : scroll;align-items: initial;">
    <app-slab2g style="padding-left : 1em;" > </app-slab2g>


  <md-grid-tile style="overflow : scroll;align-items: initial;">
    <app-slab3g style="padding-left : 1em;" > </app-slab3g>


How to align items inside the md-grid-tile differently other than its default center alignment?

You can use ::ng-deep to override the default css of md-grid-tile.


::ng-deep md-grid-tile.mat-grid-tile .mat-figure {
    align-items: initial;  /*vertical alignment*/
    justify-content: initial;  /*horizontal alignment*/

Plunker demo

Grid list, You can use ::ng-deep to override the default css of md-grid-tile . css: ::ng-deep md-grid-tile.mat-grid-tile .mat-figure { align-items: initial; /*vertical alignment*/  Angular Material Grid is two-dimensional list views which contain grid-based layout, so let us start with the actual use of a material grid. Types of the material grid elements We will use the different elements to create material grid into our angular application which is listed below.


<mat-grid-tile class="title-tem">
  <div class="item-content">


 .title-tem >::ng-deep .mat-figure{
  align-items: flex-start;
  justify-content: flex-start;

that will be work :)

Directives - md-grid-list, See Material Design spec here. Basic grid-list. code. open_in_new. 1 2 3 4 The height of the rows in a grid list can be set via the rowHeight attribute. It is possible to set the rowspan and colspan of each mat-grid-tile individually, using the rowspan and colspan properties. Code licensed under an MIT-style License. Hi @BogdanC,Thanks for reply, it has to do something with md-grid-tile which is collapsed?,As my div was not having any style or class applied. even if i remove my div only, it will be same( not visible) ,until i give it,some width, just curious to know.

To avoid messing with your whole project, use in the component:


<mat-grid-tile [colspan]="8" class="script-menu"> </mat-grid-tile>


.script-menu >::ng-deep .mat-figure{
    justify-content: flex-start;

Grid List · Angular Material 2, Tiles hold content and can span one or more cells vertically or horizontally. Responsive Attributes. The md-grid-list directive supports "responsive" attributes, which allow <md-grid-list md-cols="4" md-row-height="fit" style="height: 400px;​" . <md-grid-list md-cols-sm="2" md-cols-md="4" md-cols-lg="8" md-cols-gt-lg="​12" . A reference for the Material Design components currently available in the Angular Material 2 project. Check out this post for a getting-started guide. Angular Material 2 is in active development, so this post will be updated over time to reflect changes or additions:

this is the only reliable solution I found so far. !important didn't work. ::ng-deep messes up main code. If you use div and use absolute in css you can align the div the way you want.


<mat-grid-tile *ngFor="let project of projects" 
        [style.background]="project.Color" (click)="openDialog(project)" >
        <div fxLayoutWrap fxLayoutAlign="start center" class="footer">



.footer {
    position: absolute;
    left: 5px;
    bottom: 5px;

Angular 2 Angular Material md-grid-list columns - angular - html, I am trying to implement the Angular 2 Angular Material md-grid-list, and in the [​colspan]="tile.cols" [rowspan]="tile.rows" [style.background-image]="'url(' +  CSS Flexbox and CSS Grid are very powerful layout functions. These are already supported by all modern browsers except for IE 11. Unlike properties for styling (for examplecolor and border), these are properties for building a layout structure. In other words, it is not used to beautify the surface of HTML elements but is used to create a foundation of application UI in cooperation with the

After much blood and tears, I was able to style the first column of an angular material grid without affecting other grids on the page. The below style will left align and center vertically the Persons Name only in this <mat-grid-list>.

Angular material grid:

<mat-grid-list cols="4" rowHeight="4:1">
    <mat-grid-tile colspan="2">
        <div class="leftVerticalAlign">
        Persons Name
    <mat-grid-tile>Persons Phone</mat-grid-tile>
    <mat-grid-tile [style.border-left]="'12px solid gray'">Persons Email</mat-grid-tile>

The elusive CSS:

.leftVerticalAlign {
    left: 1em;    
    position: absolute;  
    top: 50%;
    transform: translate(0px, -50%);
    margin: 0;

I threw an extra border-left style in there as another way to apply styles, but it's limited to what it can style I've noticed.

For more info about aligning horizontally and vertically check out w3schools

They saved my life on this one.

Grid layout example., DOCTYPE html> <html> <head> <title>Angular Material Plunker</title> <! src="​"></script> [cols]=​"5" rowHeight="30px"> <md-grid-tile style="background-color:blue"> <div  I am using angular material and have a grid list component with two tiles. the problem is the contents are getting arranged left to right rather top to bottom.

Understanding Angular Material Grid Layout, Angular Material Grid is a component which is used to structure the layout in a <mat-grid-tile>Tile 1 </mat-grid-tile> <mat-grid-tile>Tile 2  UI component infrastructure and Material Design components for mobile and desktop Angular web applications.

Angular Material - Grids, Angular Material - Grids - The md-grid-list, an Angular directive, is a component for laying out content md-cols. This is for the number of columns in the grid. 2. * md-row-height md-gutter. The amount of space between tiles in CSS units (​default 1px). 4 colorTiles" ng-style = "{ 'background': tile.color }" md-colspan-gt-​sm  First install Angular Material, Angular animations, and Hammer.js in your project with these commands: $ npm install --save @angular/material @angular/animations @angular/cdk $ npm install --save hammerjs. Hammer.js is an optional dependency and helps with touch support for a few of the components. 2. angular-cli.json

html, md-grid-list cols="3" > <md-grid-tile style="overflow : scroll;align-items: initial;"> <​app-general style="padding-left : 1em;" ></app-general> </md-grid-tile>  I have made a md-grid-list with md-grid-tiles, and I want to make each one a link. I tried wrapping each tile in a md-button but this makes the element disappear. It doesn't have to be an md-butt

  • yea but this messes up other places you use grid-tiles.
  • Yes , i noticed it later too . But i found another fix as well . Might , Post it after sometime
  • Set the styles globlally in the styles.css / styles.sccs file like so: mat-grid-tile.yourClass{ overflow:auto } since ::ng-deepis deprecated:
  • adding !important worked for me.
  • try using :host , to keep the scope as the component itself and not leak the styles defined by ng-deep outside the component
  • Good advice! @AakashUniyal