CODEWITHSUNDEEP
angularmaterial-designangular-material2
hari
hari

Reputation: 103

Angular Material Grid Layout

What are predefined classes for grid layout in Angular Material? We have "row","col-sm-4" etc.. classes in bootstrap. Do we have these type of classes in Angular Material 2? Thanks.

Upvotes: 8

Views: 15033

Answers (2)

Mar
Mar

Reputation: 13

I created a sample example that should help you understand more how to use the grid by looking at the code for this example. I suggest you try it out and play with the cols numbers, and colspans and rowspans to understand what each of them do. I hope this was helpful!

<mat-grid-list cols = "5" rowHeight = "25vh">
    <mat-grid-tile 
    [colspan] = "1"
    [rowspan] = "1">1
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "3"
    [rowspan] = "1">2
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "1"
    [rowspan] = "1">3
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "1"
    [rowspan] = "1">11
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "3"
    [rowspan] = "1">22
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "1"
    [rowspan] = "1">33
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "1"
    [rowspan] = "1">111
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "3"
    [rowspan] = "1">222
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "1"
    [rowspan] = "1">333
    </mat-grid-tile>
    <mat-grid-tile 
    [colspan] = "5"
    [rowspan] = 1> 4444
    </mat-grid-tile>
 </mat-grid-list>

Upvotes: 0

P.S.
P.S.

Reputation: 16384

I'll give you the basics.

In Angular Material (for Angular 2/4) the most commonly used attributes are:

fxLayout="row | column"
fxLayoutAlign="start | center | end | stretch | space-around | space-between | none" (can accept 2 properties at the same time)
fxFlex="number" (can accept numbers from 1 to 100)

You can also use postfix as fxLayout.xs and so on to apply rules only for specific resolution.

For more info you can look through the docs: https://github.com/angular/flex-layout/wiki/API-Documentation

To play around with alignment, you can use the demonstration from Angularjs Material resource (it's totally the same as for Angular Material for Angular 2/4): https://material.angularjs.org/latest/layout/alignment

enter image description here

And another one useful link: https://tburleson-layouts-demos.firebaseapp.com/#/docs

Upvotes: 7

Related Questions