angular material: vertically arranging contents in a mat-grid-tile

Question

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.

Answer 1

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

    
        
Title
    
    
        
    
    
      
some sort of text in between
    
    
      Learn More
    

You could also wrap the content of your mat-grid-tile in a div:

    
        

            
Title
            
some sort of text in between
            Learn More