title: Creating a Responsive Grid Structure with Handlebars.js
body: <p>I'm working with handlebars.js and trying to create a responsive grid structure - however I can't seam to figure out how to create the structure with the handlebars! </p>
  
  <p>I cant work out how to organise the divs and script so the results show in the separate 'panels'! Currently they just show in one long Column on top of each other.</p>
  
  <p>I can get it to work with normal divs but not when I add the handlebars and script in.</p>
  
  <p>I think there is a simple change - but I cant work out what it is!</p>
  
  <p>How do I get the JSON data retired to show in each separate panel? </p>
  
  <p>Thanks in advance - I've spent hours trying to figure this out!</p>
  
  <p>This is the closest I have got:</p>
  
  <p>CSS:</p>
  
  <pre><code>.wrapper {
    margin: 0 auto;
  
    width: 100%
  }
  
  .wrapper &gt; * {
    background-color: #fafafa;
  
  }
  
  .content {
    padding: 8px;
    display: grid;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) ;
    grid-auto-rows: minmax(264px, auto);
    grid-gap: 16px;
  }
  
  .panel {
    margin-left: 5px;
    margin-right: 5px;
    height: 50px;
  }
  
  
  
  @media (max-width: 1100px) {
    .wrapper {
      grid-template-columns: 1fr;
    }
  
    .content {
      width: 100%;
      grid-template-columns: repeat(auto-fill, minmax(360px, 1fr) ) ;
      grid-auto-rows: minmax(300px, auto);
    }
  }
  
  @supports (display: grid) {
    .wrapper &gt; * {
      width: auto;
      margin: 0;
    }
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="expand-box"&gt;
    &lt;div class="wrapper"&gt;
      &lt;article class="content"&gt;
        &lt;div class="panel"&gt;
            &lt;script id="entry-template" type="text/x-handlebars-template"&gt;
                {{#each this}}
                  &lt;div class="column"&gt;
                    &lt;div id="est_title"&gt;{{name}} &lt;b&gt;{{rating}}/5&lt;/b&gt;&lt;/div&gt;
                    &lt;div id="know_subtitle"&gt;Known For: &lt;b&gt;{{known_for}}&lt;/b&gt;&lt;/div&gt;
                    &lt;div id="price_subtitle"&gt;{{price_range}}&lt;/div&gt;
                  &lt;/div&gt;
                {{/each}}
              &lt;/script&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/article&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>JS AJAX</p>
  
  <pre><code>var source = $("#entry-template").html();
    var template = Handlebars.compile(source);
    var html = template(data);
    $('.panel').html(html);
  </code></pre>