How to create mat-grid-list Angular Material
P粉473363527
2023-08-18 12:56:40
<p>I'm trying to create a mat-grid-list using Angular Material, the problem is that I don't see anything appearing on the page</p>
<p>This is my component info-section:</p>
<pre class="brush:php;toolbar:false;"><div class="mat-grid-list" cols="4" rowHeight="100px">
<div class="mat-grid-tile" style="grid-column: span 1; grid-row: span 2; background-color: lightpink;">
Three
</div>
<div class="mat-grid-tile" style="grid-column: span 0; grid-row: span 0; background-color: lightgreen;">
Two
</div>
<div class="mat-grid-tile" style="grid-column: span 3; grid-row: span 1; background-color: #DDBDF1;">
Four
</div>
</div></pre>
<p>Everything is installed and declared</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You need to use Angular Material’s Grid List component. Not just CSS. Please refer to the exampleshttps://material.angular.io/components/grid-list/examples
The grid-column and grid-row properties require appropriate span values to determine how many columns or rows a grid block should span.
<mat-grid-list cols="4" rowHeight="100px"> <mat-grid-tile colspan="1" rowspan="2" style="background-color: lightpink;"> Three </mat-grid-tile> <mat-grid-tile colspan="1" rowspan="2" style="background-color: lightgreen;"> Two </mat-grid-tile> <mat-grid-tile colspan="3" rowspan="1" style="background-color: #DDBDF1;"> Four </mat-grid-tile> </mat-grid-list>