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;
}
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>