I am unable to customize the style property with mat-grid-tile of angular material

Question

I am trying to create 6 tiles in each row and each tile consists of amount at the top left, + symbol at the top right, below Charity name, then below date at the extreme left and so on. But everything is coming in the middle. How to Customize the style for each mat-grid-tile.

HTML Example

mat-grid-list cols="6" rowHeight="4:3" [gutterSize]="'10px'">
  <mat-grid-tile *ngFor="let item of items; let i=index">
    <div class="div-table">
      <div class="div-row">
        <div class="div-cell" style="font-weight: bold; font-size: medium;">{{amount | currency}}</div>  
      </div>
      <div class="div-row">
        <div>{{item.Name}}</div>
      </div>
    </div>
  </mat-grid-tile>

CSS Example


mat-grid-tile {
  background: lightblue;
}

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
}
.div-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-cell {
  float: left; 
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

Answer 1

Here you have a Stackblitz demo.

You can put a div inside the tile to work as a container element (to avoid messing up with mat-grid-tile style). Inside this container, you can use flex-box to build your layout as you want. The container div of each tile could have something like:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

Then, inside the container div, you could have 3 section elements: header (taking 20%+ of the available vertical space), footer (taking 20%+ of the available vertical space), and body (taking whatever space wasn't taken by header and footer):

.container > .header {
  flex-basis: 20%;
  order: 1; /* Assure this is the first element, at the top */
}

.container > .footer {
  flex-basis: 20%;
  order: 3; /* Assure this is the third element, at the bottom */
}

.container > .body {
  flex: 1;
  order: 2; /* Assure this is the second element, in the middle */
}

You can do almost anything you want from here. For example, you said you wanted to have, in the header, the name on the left and a symbol on the right. So let's turn the header also into another flex container itself, with two section elements: header-start and header-end (just in case you want different CSS styles for them):

.header {
  display: flex;
  justify-content: space-between;
  flex-basis: 20%;
  order: 1;
}

The overall html would be like:

<mat-grid-list cols="2" rowHeight="2:1">
    <mat-grid-tile *ngFor="let i of [1,2,3,4]">
        <div class="container">
            <section class="header">
                <section class="header-start>
                    Charity name
                </section>
                <section class="header-end">
                    <mat-icon>home</mat-icon>
                </section>
            </section>

            <section class="footer">
                footer
            </section>

            <section class="body">
                body
            </section>
        </div>
    </mat-grid-tile>
</mat-grid-list>