In AngularJS Material, the md-grid-list component is designed to display items in a grid format, where items span vertically by default. If you want to make the md-grid-list span horizontally instead, you can achieve this by using some CSS styling.

Here's how you can make AngularJS Material Grid List span horizontally:

  1. HTML Structure: Create your md-grid-list with the desired number of columns and list of items.
<md-grid-list md-cols="3" md-gutter="8px"> <md-grid-tile ng-repeat="item in items"> <!-- Your item content here --> </md-grid-tile> </md-grid-list>
  1. Custom CSS: Add custom CSS to make the md-grid-list span horizontally. You can use Flexbox CSS properties to achieve this.
/* Custom CSS */ md-grid-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; } md-grid-tile { flex: 0 0 auto; /* Reset the default flex values */ width: calc(100% / 3); /* Set the width of each tile based on the number of columns (3 in this case) */ }

In the custom CSS, we use Flexbox properties to make the md-grid-list container behave like a flex container with a horizontal flow. The flex-direction: row makes the items span horizontally, and flex-wrap: wrap allows items to wrap to the next row when they exceed the container's width.

The md-grid-tile elements are given a calculated width based on the number of columns (md-cols="3" in this example). The width: calc(100% / 3); rule sets each tile's width to one-third of the container's width, effectively making three items span in a row.

Adjust the md-cols attribute and the corresponding CSS width calculation based on the number of columns you want to display horizontally.

By applying this custom CSS, your AngularJS Material Grid List should now span horizontally instead of vertically.

Have questions or queries?
Get in Touch