pinterest like grid using ember

Asked Mar 01 '17 at 17:56

Active Mar 01 '17 at 21:45

Viewed 23 times

I am trying to create pinterest like grid for my web app. I guess on mobile devices it should show two columns and more on large devices.

I have tried using ember-collection but for that i need to know the height of the cards(i need to show cards in the grid) which is not possible for me. I tried using bootstrap after that. Below is my code with bootstrap but it is rendering single column only

<div class="row">
  {{#each model as |item|}}
    {{#feed-small class="col-md-2" feed=item}} {{/pixyfi-feed-small}}
    {{/each}}
 </div>

Could you please let me know where i am doing mistake?

Update: using xs instead of md works but it leaves large vertical gaps

edited Mar 01 '17 at 21:45

Gennady Dogaev

5,902
1
15
23

asked Mar 01 '17 at 17:56

Kumar Gaurav

1,287
3
19
47

`md` classes are created for medium devices (min 768px). For mobile you should use xs size – Mattonit Mar 01 '17 at 18:49
using xs works but it leaves large verticle gaps as well. see updated post – Kumar Gaurav Mar 01 '17 at 20:20
what is your version of bootstrap? – Mattonit Mar 01 '17 at 20:21
I am using "bootstrap": "^4.0.0-alpha.6", "bootstrap-sass": "^3.3.7", – Kumar Gaurav Mar 02 '17 at 03:45
could you create a snippet with the code you tried? – Mattonit Mar 02 '17 at 08:39
sure i'll do and will let u know – Kumar Gaurav Mar 02 '17 at 13:47
js fiddle is here https://jsfiddle.net/fs8Lh6md/. It might load a little slow as i have included all css generated by ember – Kumar Gaurav Mar 02 '17 at 16:21

pinterest like grid using ember

0 Answers0