Center aligned grid list in Angular Material
12,042
You can use CSS Flexbox.
Make your parent (i.e. md-grid-list
) a flex container using display: flex
& use justify-content: center
to align its children (i.e. md-grid-tile
) horizontally center. Like:
md-grid-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
I've used div
's instead of regular md-
type components for demonstration:
-
md-grid-list
is equivalent to.list
-
md-grid-tile
is equivalent to.tile
Have a look at the example snippet below (updated fiddle according to your requirements):
.list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.tile {
width: 100px;
height: 100px;
border: 1px solid #777;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
<div class="list">
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
</div>
Hope this helps!
Author by
Vinu Developer
Updated on June 18, 2022Comments
-
Vinu Developer almost 2 years
I wanted to get a center aligned grid list in Angular Material.
This is my code:
<md-content layout-padding> <md-grid-list md-cols-gt-md="10" md-cols-md="8" md-cols-sm="6" md-cols="4" md-cols-xs="3" md-row-height-gt-md="1:1" md-row-height="1:1" md-row-height-xs="110px" md-gutter-gt-md="10px" md-gutter="2px"> <md-grid-tile ng-repeat="item in homeTilesNavigation"> <div class="compas-home-text">{{item.name}}</div> </md-grid-tile> </md-grid-list> </md-content>
I am getting a result like this:
I wanted the same grid list to be center aligned. Here is the fiddle code.
-
Saurav Rastogi over 7 years@VinuDeveloper Angular Material is overwriting the styles heavily, still I've updated the fiddle code & make it according to your requirements - jsfiddle.net/d8zsoed8/16 . Also don't forgot to accept this as your answer, if this helped you out.