Question 232113 in Html Question posted in
Some basic documentation can be found here.

Html – How to create mat-grid-list angular Material

I’m trying to create a mat-grid-list with angular material, the problem is that I don’t see anything appear in my page

this is my component info-section :

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

every thing is installed and declared

Tags:

2

Answers


  1. 0

    You need to use the Angular Material grid list components. Not just the CSS
    See examples https://material.angular.io/components/grid-list/examples

    Login or Signup to reply.
  2. 0

    The grid-column and grid-row properties need appropriate span values to determine how many columns or rows a grid tile 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search