Menu icon Foundation
XY grid images not fitting on one line

Hi 

I am trying to place 12 pictures side-by-side on one line. The issue is that the last image is place on a second line rather than all 12 in on one line.

If I check the css-styles in the browser, each images has a correct width of 8.33% (wich is 1/12 of 100%) and no padding, border or margin. 

Am I missing something?

<div class="grid-x">
<div class="small-10 small-centered cell">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
</div>
</div>
 

Hi 

I am trying to place 12 pictures side-by-side on one line. The issue is that the last image is place on a second line rather than all 12 in on one line.

If I check the css-styles in the browser, each images has a correct width of 8.33% (wich is 1/12 of 100%) and no padding, border or margin. 

Am I missing something?

<div class="grid-x">
<div class="small-10 small-centered cell">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<img class="small-1 cell" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
</div>
</div>
 
Gregor almost 2 years ago

If I check the resulting page, there is some space between the images, however in the foundation docs it says :

"Without defining a gutter type the cells will simply split up the space without any gutters."

If I inspect the individual images, they do no show any margin or padding...

Roy Six almost 2 years ago

Hi, going by the code you posted in the first post, you should contain the images into their own individual cell divs (you're making the images cells themselves). Here's a codepen with the markup corrected to how I would write it, so that all 12 images sit on one line with no breaks. 

https://codepen.io/sixs/pen/MEqvRM

Also, I'm not sure what the intent was with the first div small-centered in your code, but if you want to make everything centered, you'd add a grid-container (which defines a max-width) and contain the grid-x.

Nik Sol almost 2 years ago

You can use Roy's solution and in case you wanted to have the 12 images nested inside 10 columns (at least this is what I deduce from this line: <div class="small-10 small-centered cell">) here is an example with nested option:

<div class="grid-container fluid">
  <div class="grid-x grid-margin-x align-center">
    <div class="small-10">
      <div class="grid-x">
        <div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-1" alt="Space"></div>
        <div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-2" alt="Space"></div>
        <div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-3" alt="Space"></div>
        <div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-4" alt="Space"></div>
        <div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-5" alt="Space"></div>
        <div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-6" alt="Space"></div>
        <div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-7" alt="Space"></div>
        <div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-8" alt="Space"></div>
        <div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-9" alt="Space"></div>
        <div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-10" alt="Space"></div>
        <div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-11" alt="Space"></div>
        <div class="small-1 cell"><img src="https://placehold.it/1200x600/?text=Slide-12" alt="Space"></div>
      </div>
    </div>
  </div>
</div>

 

Gregor almost 2 years ago

Thanks Roy, this worked for me!