Best way to line up a row of elements on the page

Hi, I have some images in a row they scale well responsive. But as I have two separate rows than I will have a gap when scaling them responsive because the images will not line up nice.

To be able to add images to the row (with cms) or product cards as repeating elements, I want to find out what the best way is to have them lined up.

My first thought was using

  • and add a new card or image-block as a new
  • . Lining them with float-right? Will that work?

    Or just having separate in a grid? But how would that work?
    What is the best way to achieve this?
    I,m using Foundation. 6.4.2 for this project.

    Here are my image rows in two blocks giving problems when responsive on tablet size.

I would probably use block-grid but its possible.

To align left add the .end class to the last column to align as so:

large-4 medium-6 small-12 columns end


If you add a custom class to the last column - you can align center with this css applied to your medium breakpoint:

.align-c {
   margin-left: auto;
   margin-right: auto;
   float: none;

Also add vertical spacing to your overlay-container div.

@iamrobert Thanks for your reply. It is interesting to se how that works. I will try how this works out when having more than 3 items in the row.
For now i found that also a good solution is to have medium-4 columns making the tiles to sit neat beside each other on tablet and mobile.

Now this “block” is a static item just having tree items. I am wondering how to get this for a repeating block element. Where I add the blocks to the row one by one?

Tried to build that using a code-pen example:
This is my codepen: which has a tiny problem as you can see :slight_smile:

  1. Am I on the right track here? Or is there a better approach? Will try to use the block-grid here.
    this is a nice sample of how that could work:

  2. made me also wondering, can I use more than one Foundation "grid techniques " in a site design? I like the column approach but I see that the block-grid has also advantages in this case.
    So I will give that a try on my cards experience :slight_smile:

Convinced that the block-grid might be a nice solution for me I tried starting with it just build a copy of a codepen I found. But the strange thing is, al tough I have all settings the same, the result is not the same? Not lining up horizontal? What is my mistake?

my pen:
the one a used as a sample to start:

Any one who can see why this is not working on the codepen I created? Need some input so I can finish this :slight_smile:

Ok made some progress decided to try it in the webdesign to see how it works out. the result is promising. At least a large screen it is ok.

Some things to find out: how to get the space between the rows smaller?
What is the best way to make it all fit nicer on mobile and tablet screen?

Because the codepen zurb foundation css is 6.5:

Block Grids are disabled by default from 6.4:

Here’s how to implement:

adjust the margins in your:

.sh_video_card {
margin: 20px;

max-height: 97px;

as the first box is cut off.

Thanks for the info about the version. For this site I use a downloaded version I think that has the float grid right?

I used the max-height to prevent editors having more than allowed text and also make sure that the box stay the same height. If I do not have that they will vary in height which is not desired.

How to get the space between the rows less high? Can that be done with some css as well?

For fitting better on smaller screens can I adapt this css as well? Or will that cause other problems?:

.small-collapse > .column, .small-> .columns {
padding-right: 0;
padding-left: 22px;

Might have them in a @media as well and just for this sh_video_card div class to prevent it will be applied to other columns as well. Or is this not the way to achieve this?

Before and after applying this on mobile screen:

I answered a part my own question. I now discovered I had a margin-top at 50px (and bottom) which made the gap :slight_smile: So taking that out made it much better :slight_smile:

I probably wouldn’t adjust the global padding/margin unless you want to do it sitewide. Plus it shrinks the scroll area on mobile.

Then you would be best to adjust it in scss and output.

You can also make a custom class based on your parent div .sh_video_card_wrap - then it applies only to this:

.sh_video_card_wrap .small-collapse > .column, 
.sh_video_card_wrap .small-> .columns {


To adjust for mobile - you could add a margin around:

.sh_video_card_wrap {
margin: 0 20px;

Thanks. Will try that. Getting better every step. I’m not using scss just old fashion css :slight_smile:

Now I have to take this a step further as well. When there are only 2 video’s the client want it to centre. As on the image.
I can get that with setting “large-offset-2” on the first video-element. the problem is that these elements are dynamic. so every element will get “large-offset-2” which again messes it up :slight_smile:)

is there a way to get this only applied on the first element in the row as there are only 2? Or better create a new element where there are only two columns available to fill… with a video_card.

Still interested to find out how this could be done best with a row.

But for now I have solved t by using a two column block. With large-offset-2 on the first column and “end” in the second column.

6.3 uses Flexbox Grid as default, 6.4 and above use XY Grid as default. Block Grid is the way to go. Using Foundation 6.6.3, I added CSS for align-center and customized the class card-divider.
.align-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; }
.card-divider {
color: #ffffff;
background-color: #b3222b;
padding: 0.25rem 1rem;
justified-content: center;
See link below to jsfiddle:
Block Grid Cards - centered

In JS Fiddle, pull the viewable area to medium size to see it go to 2-up and center the remaining card.

Having the two video,s center, now I need also just one video to center on the page? How would I achieve that?
Just using a 3 column layout will still have the video-card sitting on the left site. since the first column is empty. Just not getting there. Your advise is appreciated.

testing with just an image give me this result (last row) so it will center but does it still center when the other rows are not there?

even i am looking for this thank god i found this forum :innocent: