<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>

<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',
    gutter: 4
  });

});
</script>

Use Masonry's gutter setting for right hand margin
Use Masonry's gutter setting for right hand margin
