title: Foundation Vertical X-Y Grid: content 100vh and responsive in grid-y
body: <p>Using FoundationPress to build a WordPress theme. On the homepage, I would like to create a vertical grid layout using Foundation's <code>grid-y medium-grid-frame</code> <a href="https://foundation.zurb.com/sites/docs/xy-grid.html#vertical-grids" rel="nofollow noreferrer">vertical grid</a> to keep all content within the viewport. Therefore the content in the <code>&lt;main&gt;</code> element to <strong>not</strong> expand beyond the <code>footer</code>. The images will always respond to the height of the viewport. Right now it is wrong:</p>
  
  <p><a href="https://ibb.co/MkJby9s" rel="nofollow noreferrer">Screenshot of overflow issue</a></p>
  
  <p>So the footer should always be at the bottom of the viewport and no vertical scrolling, with the <code>&lt;main&gt;</code> content fitting nicely inside and responding to any screen size. Unless its mobile, then the footer will be at the bottom of the stacked images. Seems super basic.</p>
  
  <p>Here is the site in question <a href="https://comedydynamics.com" rel="nofollow noreferrer">https://comedydynamics.com</a>, I tried to replicate on a CodePen, but it doesnt turn out the same. </p>
  
  <p>Tried to instead use the <code>x-grid</code>, but no luck. Was messing around with CSS position, overflow, even different display options. Really stumped on this one.</p>
  
  <p>My theme code:</p>
  
  <pre><code>&lt;?php $post_objects = get_field('home_feat_posts');
  
      if ($post_objects): ?&gt;
  
      &lt;?php foreach ($post_objects as $post_object): ?&gt;
  
          &lt;a class="cell medium-6 large-offset-1 large-5 img-container" href="&lt;?php echo get_permalink($post_object-&gt;ID); ?&gt;"&gt;
  
              &lt;?php
  
              $image = get_field('home_image', $post_object-&gt;ID);
  
              $size = 'fp-xlarge'; // (thumbnail, medium, large, full or custom size)
  
              if ($image) {
                  echo wp_get_attachment_image($image, $size);
              }
  
              ?&gt;
  
          &lt;/a&gt;
  
      &lt;?php endforeach; ?&gt;
  
  &lt;?php endif; ?&gt;
  </code></pre>
  
  <p>The output:</p>
  
  <pre><code>&lt;main class="grid-y"&gt;
  
      &lt;div class="cell medium-auto medium-cell-block-container home-container"&gt;
  
          &lt;div class="grid-x pt-2 pb-2"&gt;
  
              &lt;a href="" class="cell medium-6 large-offset-1 large-5 img-container"&gt;
  
                  &lt;img width="750" height="404" src="//localhost:3000/. . ." class="attachment-fp-xlarge size-fp-xlarge" alt=". . ." srcset="//localhost:3000/. . . 750w, //localhost:3000/. . . 300w, //localhost:3000/. . . 640w" sizes="(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 750px"&gt;
  
              &lt;/a&gt;
  
              &lt;a href="" class="cell medium-6 large-offset-1 large-5 img-container"&gt;
  
                  &lt;img width="750" height="404" src="//localhost:3000/. . ." class="attachment-fp-xlarge size-fp-xlarge" alt=". . ." srcset="//localhost:3000/. . . 750w, //localhost:3000/. . . 300w, //localhost:3000/. . . 640w" sizes="(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 750px"&gt;
  
              &lt;/a&gt;
  
              &lt;a href="" class="cell medium-6 large-offset-1 large-5 img-container"&gt;
  
                  &lt;img width="750" height="404" src="//localhost:3000/. . ." class="attachment-fp-xlarge size-fp-xlarge" alt=". . ." srcset="//localhost:3000/. . . 750w, //localhost:3000/. . . 300w, //localhost:3000/. . . 640w" sizes="(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 750px"&gt;
  
              &lt;/a&gt;
  
              &lt;a href="" class="cell medium-6 large-offset-1 large-5 img-container"&gt;
  
                  &lt;img width="750" height="404" src="//localhost:3000/. . ." class="attachment-fp-xlarge size-fp-xlarge" alt=". . ." srcset="//localhost:3000/. . . 750w, //localhost:3000/. . . 300w, //localhost:3000/. . . 640w" sizes="(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 750px"&gt;
  
              &lt;/a&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/main&gt;
  </code></pre>
  
  <p>Could this have to do with my image sizing in WordPress?</p>
  
  <p>Hope I gave enough info, haha.</p>
  
  <p>Thanks!</p>
  
  <p><a href="https://codepen.io/luukee/pen/WPpGOj/" rel="nofollow noreferrer">See the Pen</a></p>
  
  <p>Our objective:</p>
  
  <p><a href="https://ibb.co/MkJby9s" rel="nofollow noreferrer">What we want. No overflow of main content</a></p>