How to render a (Twitter Bootstrap) grid using Ember.js and Handlebars.js?

Answer 1

G'day Dave

Instead of useing rows and div to make a block grid try using an "unordered list"

The HTML

  
Item #1 (row #1 / column #1)
  
Item #2 (row #1 / column #2)
  
Item #3 (row #1 / column #3)
  
Item #4 (row #2 / column #1)
  
Item #5 (row #2 / column #2)
  
Item #6 (row #2 / column #3)
  
Item #7 (row #3 / column #1)

Then the CSS would look like this.

ul.block-grid-3 {
   display: block;
   overflow: hidden;
   padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
ul.block-grid-3 > li {
   width: 33.33333%;
   float: left;
   padding: 0 12px 12px;
   display: block;
   height: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
ul.block-grid-3 > li:nth-of-type(3n+1) {
   clear: left;
}

Then if you wanted to change to four blocks you can can change the css to:

ul.block-grid-4 > li {
   width: 25%;
   float: left;
   padding: 0 12px 12px;
   display: block;
   height: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}  
ul.block-grid-4 > li:nth-of-type(4n+1) {
   clear: left;
}

jsfiddle example a more robust solution.

You can also check out this ember app Open-pos the products are layout using this method.

Zurb's css framework "foundation" as great solution called block-grid. This there system it is super easy to change the 3 up grid other number with just a small change in the css. you could drop in the block grid code into your bootstrap scss. If you have any questions let me know.

Cheers