Grid component

Hey,

On a project i’m working on at the moment requires the use of a Grid, the functionality will be very similar to the list: image + text, same navigation behaviour and infinite scroll.

Is this something in your development roadmap? or shall I go-ahead and start the development myself? and hopefully merge in the future?

Cheers,
Bernard.

Are you asking for a responsive grid or just a list item with a thumb nail? A responsive grid was actually added yesterday. Its pretty straight forward and comes with a few breakpoints you can choose.

I think it can work as a list item style as well, but we have to take in consideration the fact that the grid will hold more than 1 item per row.

Something like this ideally: http://masonry.desandro.com/

If you looking for something like masonry, there is an angular mason directive. How many items are you trying to hold? If its going to be a set size, you can mess with some flex-wrap properties so that any item that doesn’t fit the the row, will just flow down below.

This way you can create one row, have some explicit width items in there, and let the flex-wrap property work its magic. Then at a certain breakpoint, everything item is its own line.

Will give that a try.

Edit.
Didn’t understand at first.

I think it depends on what you are trying to achieve. A layout similar to the masonry demo (pintrest) or just a card item with a thumbnail and some text (Facebook)

Something similar to this: http://www.rocketspark.co.nz/files/2713/8688/8285/products2.jpg

If thats the style you’re trying to achieve, then you should give the masonry directive a shot.

You could always use css columns. See this example: http://css-tricks.com/seamless-responsive-photo-grid/

1 Like