If you are not worried about adding jQuery and the like then you can also use angular-masonry. Unlike angular-masonry this library doesn't have any dependencies. If you are instead looking for some kind of staggered grid, then you have to add a library: angular-deckgrid, it just provides the grid layout, everything in the content is angular-material. You can use ratios or fixed CSS heights for the rows and then it is your cards job to display the content in a flexible way. You need to know the height of the cards in order to use the Grid-List, but you can easily achieve the 100% height on small screens. You can easily adapt the sample for your column count. Make sure to add layout-fill on the md-card. I adapted the sample from the site and added md-card in the contents. You can use the material Grid-List, it allows for custom col-spans and animates the changes when the width changes. Material seems geared toward a Masonry-like flex layout, and I'd like to stick with that. Also, such solutions would leave whitespace in the page where cards vary in height. I have to think that Material provides for a better solution. I suppose I could loop every two cards with Angular and create stacked sets, but that seems needlessly cumbersome. There's a similar question on SO already, but accepted answer is unsatisfactory as it uses custom CSS and the cards aren't fluid-width. Here's the basis of the markup I'm using, which takes the card layout from rows to columns at the first breakpoint: I haven't figured out how to specify the number of columns for each breakpoint. The problem is that A-M creates columns for each card. Ideally, cards will be full-width for small screen widths and jump to two columns at larger breakpoints. I'm trying to create a grid of Angular-Material cards that behaves somewhat like a Bootstrap grid.
0 Comments
Leave a Reply. |