Menu icon Foundation
Grid trouble with images

Hi there!

I’m new to Foundation and also to using a grid system for layout.

This is what I would like to achieve, but I’m having difficulty translating it into the grid:

Product images

Here’s what I have so far...
I’ve added .columns { border: 1px solid red; } to the css to make it easier to see what’s happening:

Foundation img trouble

And here is the HTML:

  <div class='row'>
    <section class='small-6 columns'>
      <%=image_tag 'new_in.png'%>
    </section>
    <aside class='small-3 columns'>
      <%=image_tag 'mens.png'%>
    </aside>
    <aside class='small-3 columns'>
      <%=image_tag 'womens.png'%>
    </aside>
  </div>

  <div class='row'>
    <section class='small-3 columns'>
      <%=image_tag 'kids.png'%>
    </section>
    <aside class='small-6 columns'>
      <%=image_tag 'ski_snowboard.png'%>
    </aside>
    <aside class='small-3 columns'>
      <%=image_tag 'footwear.png'%>
    </aside>
  </div>

  <div class='row'>
    <section class='small-6 columns'>
      <%=image_tag 'loungewear.png'%>
    </section>
    <aside class='small-3 columns'>
      <%=image_tag 'hoodies.png'%>
    </aside>
    <aside class='small-3 columns'>
      <%=image_tag 'accessories.png'%>
    </aside>
  </div>  

With my limited understanding of the grid, I thought this might work… Is something happening to resize the images and prevent them from filling the columns? Or perhaps there is another (preferable) way of going about this altogether...

Any suggestions would be hugely appreciated!

Many thanks,
Alexandria

Foundation 5imagesgrid

Hi there!

I’m new to Foundation and also to using a grid system for layout.

This is what I would like to achieve, but I’m having difficulty translating it into the grid:

Product images

Here’s what I have so far...
I’ve added .columns { border: 1px solid red; } to the css to make it easier to see what’s happening:

Foundation img trouble

And here is the HTML:

  <div class='row'>
    <section class='small-6 columns'>
      <%=image_tag 'new_in.png'%>
    </section>
    <aside class='small-3 columns'>
      <%=image_tag 'mens.png'%>
    </aside>
    <aside class='small-3 columns'>
      <%=image_tag 'womens.png'%>
    </aside>
  </div>

  <div class='row'>
    <section class='small-3 columns'>
      <%=image_tag 'kids.png'%>
    </section>
    <aside class='small-6 columns'>
      <%=image_tag 'ski_snowboard.png'%>
    </aside>
    <aside class='small-3 columns'>
      <%=image_tag 'footwear.png'%>
    </aside>
  </div>

  <div class='row'>
    <section class='small-6 columns'>
      <%=image_tag 'loungewear.png'%>
    </section>
    <aside class='small-3 columns'>
      <%=image_tag 'hoodies.png'%>
    </aside>
    <aside class='small-3 columns'>
      <%=image_tag 'accessories.png'%>
    </aside>
  </div>  

With my limited understanding of the grid, I thought this might work… Is something happening to resize the images and prevent them from filling the columns? Or perhaps there is another (preferable) way of going about this altogether...

Any suggestions would be hugely appreciated!

Many thanks,
Alexandria

Karl Ward almost 6 years ago

I am not entirely sure why the layout results as in your screenshot, but it looks like the images are scaling to their 100% max-width (which is maximum, per default). The grid is then just wrapping around the images. You would need to try to use larger images (that don't need to scale up) ...

However, I would not try to use the Foundation "grid" for something like this if I was you. In best case scenario, you will still have issues with margins, and the grid will be incredibly sensitive to image sizes in your layout. Image grid layouts like that are normally handled with the help of jQuery plugins. I would check out this one:
http://ed-lea.github.io/jquery-collagePlus/

You could even create something like in your example, without any grid. Just assign classes to your images:

.square {
   width: 25%;
   float: left;
}
.wide {
   width: 50%;
   float: left;
}

It would require some modification to add margins properly, but in essence the above should work.

Marc McGee almost 6 years ago

Alexandria:
Another approach to the photo grid can be seen at http://plainmade.com/space. Though spacing between images is much larger.

Jonathan Doege almost 6 years ago

Foundation is great, but you are confused on the grid. Since the grid is about Mobile first, if you want the grid to fold over and stack neatly in all one column in Mobile, you need to use large-

Like you I used Foundation 5. I never used a previous version so I am a newbie too, but I'm learning all I can.

If you are duplicating an older layout where Left is Aside, and not the Right, you can use push pull command. Otherwise the above I tested with my own images in Foundation 5.

small-x grid keeps the same no matter how small, and is best used with whatever looks good in mobile. You can swap the dimensions different in large-view for a two column grid by combining the styles like this, I have done:

<div class='row'>
    <section class='large-6 columns'>
      Left<img src="_img/larue.jpg" alt="Product of X."/>

    </section>
    <aside class='large-3 columns'>
      LeftRight<img src="_img/x.jpg" alt="Product of X."/>
    </aside>
    <aside class='large-3 columns'>
      FarRight<img src="_img/x.jpg" alt="Product of X."/>
    </aside>
  </div>
  <div class='row'>
    <section class='large-6 columns'>
      Left<img src="_img/lx.jpg" alt="Product of X."/>
    </section>
    <aside class='large-3 columns'>
      LeftRight<img src="_img/x.jpg" alt="Product of X."/>
    </aside>
    <aside class='large-3 columns'>
      FarRight<img src="_img/x.jpg" alt="Product of X."/>
    </aside>
  </div>

I duplicated your code, but I used all images in portrait mode rather than mixed portrait/landscape. I also changed the image tags to display images from my "_img" folder

The stacking order was left then left right then far right, and repeat.

Essentially small is for when you do not want stacking behavior.

I hope that helps.

PS if you want to use small grids but have them different dimensions in large view, do this:

<div class="row">
    <aside class="large-3 small-6 columns">
      <p>Spanning large columns large, but 6 columns small.</p>
    </aside>
    <section class="large-9 small-6 columns">
      <p>Spanning a wide space when large of 9 columns, 6 columns small.</p>
        <p>No matter how big or large my page gets there will always be 2 columns, divided up this way. In other words one column will not stack on top of the other.</p>
    </section>    
  </div>

PS2, for mobile-mode they will all stack and each will try to use the entire width of available browser space, whatever image will be loading.

I'm brand new to Foundation, but I love the way it is a high level programming language for the UX, and it can do so much more!