Menu icon Foundation
How to achieve grid stack in foundation?

I want to be able to achieve the following effect with images in foundation.

Foundation effect

What I'm having trouble with is getting the right two images to line up perfectly with the top and bottom of the left page. I want it to be responsive to the page. Could anyone help me out or point me in the right direction?

grid

I want to be able to achieve the following effect with images in foundation.

Foundation effect

What I'm having trouble with is getting the right two images to line up perfectly with the top and bottom of the left page. I want it to be responsive to the page. Could anyone help me out or point me in the right direction?

Jacob Brooks about 5 years ago

This would depend on the version of Foundation you are using. Foundation 5 has the equalizer that helps with this concept. The docs are here:

http://foundation.zurb.com/docs/components/equalizer.html

If you wanted to code this yourself, in my opinion the best route would be to set up your DIVs first like so:

<div class="row>
     <div class="small-12 large-6 columns>
          <-- Image goes here -->
     </div>

     <div class="small-12 large-6 columns>
         <div class="row">
               <div class="small-12 large-12 columns">
                      <-- Image goes here -->
               </div>
               <div class="small-12 large-12 columns">
                      <-- Image goes here -->
               </div>
          </div>
     </div>
</div>

Nothing crazy with that setup, the trick is to size your images right. Basically if your larger image was going to be 500px tall, you would want your 2 smaller stacked images to be 250px tall, so that when they stacked, they would be the same height. Using your developer tools in browser can help you adjust for any padding or any margins that you might have set.

I hope this helps, let me know if you have any questions.

James Stone almost 5 years ago

Take a look at how the .flex-video and .widescreen classes work in foundation. (look in the scss or the gerenated CSS) You can create a custom class to change the ratio (based on .widescreen) and then use the .flex-video to keep your images in the proper aspect ratio