<div id="header">
  <img src="/img/odi_dashboard_logo.svg" />
  <h1><%= @title %></h1>
</div>
<div id="dashboard">
  <div class="grid">
    <ul>
    <% @board.each do |member| %>
      <li>
        <% url = "/metrics/#{member['metric']}" %>
        <iframe src='<%= url %>?layout=bare&<%= query_string member %>' class='embed-responsive-item' width='100%' height='100%' frameBorder='0' scrolling='no'></iframe>
      </li>
    <% end %>
    </ul>
  </div>
</div>

<script>
$(function(){ //DOM Ready

  $('.grid').masonry({
    // options
    itemSelector: 'li'
  });

});
</script>

<div id="header">
  <img src="/img/odi_dashboard_logo.svg" />
  <h1><%= @title %></h1>
</div>
<div id="dashboard">
  <ul class="grid">
  <% @board.each do |member| %>
    <li>
      <% url = "/metrics/#{member['metric']}" %>
      <iframe src='<%= url %>?layout=bare&<%= query_string member %>' class='embed-responsive-item' width='100%' height='100%' frameBorder='0' scrolling='no'></iframe>
    </li>
  <% end %>
  </ul>
</div>

<script>
$(function(){

  $('.grid li').height((window.innerHeight - 85) / 2)

  var $grid = $('.grid').masonry({
    itemSelector: 'li'
  });

});
</script>

Set height to make rows 50% of the viewport
Set height to make rows 50% of the viewport
