I am using angular material and have a grid list component with two tiles. the problem is the contents are getting arranged left to right rather top to bottom.
<mat-grid-list cols="3" style="padding:10px">
<mat-grid-tile colspan="1" class="mi-tile-contents-top">
<h2 class="mi-text-header">Title</h2>
<div>some sort of text in between</div>
<button mat-raised-button class="mi-button">Learn More</button>
</mat-grid-tile>
<mat-grid-tile colspan="2"><img src="../assets/images/cg_app.png" width="100%"/></mat-grid-tile>
</mat-grid-list>
i thought div should force the contents go vertically arranged but it doesnt.
Also by default the contents are arranged vertically align centered. trying align-start did not help in that either.
Seems basic thing to be working so not sure if i am doing something wrong.
The reason it's horizontal is because the Material lib is wrapping your tags located inside mat-grid-tile in a flex styled element that has a row flex-direction by default.
If I get it right, the code below should do want you want.
When using grid-list elements, the order has an importance
<mat-grid-list cols="3" style="padding:10px">
<mat-grid-tile colspan="1" rowspan="1">
<h2>Title</h2>
</mat-grid-tile>
<mat-grid-tile colspan="2" rowspan="3">
<img src="../assets/images/cg_app.png" width="100%"/>
</mat-grid-tile>
<mat-grid-tile colspan="1" rowspan="1">
<div>some sort of text in between</div>
</mat-grid-tile>
<mat-grid-tile colspan="1" rowspan="1">
<button mat-raised-button class="mi-button">Learn More</button>
</mat-grid-tile>
</mat-grid-list>
You could also wrap the content of your mat-grid-tile in a div:
<mat-grid-list cols="3" style="padding:10px">
<mat-grid-tile colspan="2" >
<div>
<h2>Title</h2>
<div>some sort of text in between</div>
<button mat-raised-button class="mi-button">Learn More</button>
</div>
</mat-grid-tile>
<mat-grid-tile colspan="1">
<img src="../assets/images/cg_app.png" width="100%"/>
</mat-grid-tile>
</mat-grid-list>
try below one, you have set colspan so that it will occupy full width of the div
<mat-grid-list cols="3" style="padding:10px">
<mat-grid-tile md-colspan="6" colspan="6" class="mi-tile-contents-top">
<h2 class="mi-text-header">Title</h2>
<div>some sort of text in between</div>
<button mat-raised-button class="mi-button">Learn More</button>
</mat-grid-tile>
<mat-grid-tile md-colspan="6" colspan="6" ><img src="../assets/images/cg_app.png" width="100%"/></mat-grid-tile>
</mat-grid-list>
