How to responsively have a mix of odd and even columns with all columns staying the same height

Question

I need to build a responsive layout that goes from a 3 by 2 layout on desktop to a 2 by 3 on mobile.

Here is a basic example of my HTML layout

<section class="itineraries-hub__categories">
  <div class="row">
    <div class="small-6 x-large-4 columns">
      ...
    </div>
    <div class="small-6 x-large-4 columns">
      ...
    </div>
    <div class="small-6 x-large-4 columns">
      ...
    </div>
  </div>
  <div class="row">
    <div class="small-6 x-large-4 columns">
      ...
    </div>
    <div class="small-6 x-large-4 columns">
      ...
    </div>
    <div class="small-6 x-large-4 columns">
      ...
    </div>
  </div>
</section>

Now I can imagine a lot of you are thinking, why don't I just get rid of the 2 rows and have 1 big row, this is a valid question although I need to have each column the exact same height which I am doing with display:table and display:table-cell. This is why I have my HTML it the layout it is.

So then I think about using Flexbox which I'm sure you are all thinking too, the issue is that I have to support IE9 which means I cannot use flexbox for desktop. I am very open to using it for mobile.

So bearing in mind that I cannot use Flexbox on desktop and that all columns must be the same height, this is where I have become stuck. Please see below for my full HTML and CSS

.row {
  display: table;
  width: 100%;
}
.columns {
  display: table-cell;
  width: 33.4%;
}
.category__link {
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.category__image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: url(/assets/images/resources/blank.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
img {
  position: absolute;
}
.category__title {
  display: block;
  background: #323945;
  color: white;
  font-weight: 400;
  font-family: 'MuseoSansW01-Rounded900', sans-serif;
  font-size: 16px;
  line-height: 2;
  padding: 18px 14px 14px 26px;
  overflow: hidden;
}
.category__tag {
  float: right;
  display: inline-block;
  padding: 6px 12px;
  margin-top: -1px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
  background: black;
  text-transform: uppercase;
  font-weight: 400;
  font-family: 'Proxima Nova W08 Reg', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-family: 'Proxima Nova W08 Bd', sans-serif;
  font-size: 13px;
}
@media only screen and (max-width: 500px) {
  .row {
    display: flex;
    flex-wrap: wrap;
  }
  .columns {
    display: flex;
    width: 50%;
  }
}

<section class="itineraries-hub__categories">
  <div class="row">
    <div class="small-6 x-large-4 columns">
      <a class="category__link">
        <div class="category__image-container">
          <img src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/landscapes/article images/w1400_a_new landscape_main.jpg">
        </div>
        <span class="category__title">
          Discover dramatic scenes
          <span class="category__tag">Explore</span>
        </span>
      </a>
    </div>
    <div class="small-6 x-large-4 columns">
      <a class="category__link">
        <div class="category__image-container">
          <img src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/landscapes/article images/w1400_a_new landscape_main.jpg">
        </div>
        <span class="category__title">
          Discover dramatic scenes
          <span class="category__tag">Explore</span>
        </span>
      </a>
    </div>
    <div class="small-6 x-large-4 columns">
      <a class="category__link">
        <div class="category__image-container">
          <img src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/landscapes/article images/w1400_a_new landscape_main.jpg">
        </div>
        <span class="category__title">
          Discover dramatic scenes
          <span class="category__tag">Explore</span>
        </span>
      </a>
    </div>
  </div>
  <div class="row">
    <div class="small-6 x-large-4 columns">
      <a class="category__link">
        <div class="category__image-container">
          <img src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/landscapes/article images/w1400_a_new landscape_main.jpg">
        </div>
        <span class="category__title">
          Discover dramatic scenes
          <span class="category__tag">Explore</span>
        </span>
      </a>
    </div>
    <div class="small-6 x-large-4 columns">
      <a class="category__link">
        <div class="category__image-container">
          <img src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/landscapes/article images/w1400_a_new landscape_main.jpg">
        </div>
        <span class="category__title">
          Discover dramatic scenes
          <span class="category__tag">Explore</span>
        </span>
      </a>
    </div>
    <div class="small-6 x-large-4 columns">
      <a class="category__link">
        <div class="category__image-container">
          <img src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/landscapes/article images/w1400_a_new landscape_main.jpg">
        </div>
        <span class="category__title">
          Discover dramatic scenes
          <span class="category__tag">Explore</span>
        </span>
      </a>
    </div>
  </div>
</section>

I also have a JSFiddle https://jsfiddle.net/gd2xnfb3/1/

If anyone can help me solve this problem, remembering my requirements that would be great.

@Paulie_D Hmm, I have been thinking that too, I would rather not if I can avoid it. — lukehillonline, Oct 24 '16 at 14:20
Are you up to using a [flexbox polyfill](https://github.com/jonathantneal/flexibility) to get IE<11 compatibility? Because that's what I would do. If not, I would go with a flat element hierarchy and a float-layout with element widths going from 33% to 50% in the media query. [Here is how you make the floating divs the same height](http://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height) — Per Salbark, Oct 24 '16 at 14:49
@PerSalbark I like the look of your floating divs solution, I have created a working version myself, but I do worry about the cross browser support of such a solution, can you shed any light on this? Here is my working example https://jsfiddle.net/gd2xnfb3/5/ — lukehillonline, Oct 24 '16 at 15:11
@RickSibley your solution does not keep all columns the same height, see my test here https://jsfiddle.net/gd2xnfb3/6/ — lukehillonline, Oct 24 '16 at 15:22

Nasir T · Answer 1 · 2016-10-24T16:54:27.077

2

Bootstrap Solution:

You can easily achieve this using bootstrap with a single row using the following classes

<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 columns">

For the same column height solution, I have used matchheight.js which is the most easiest and efficient solution in case you dont want to use flex css solution due to cross-browser compatibility.

E.g. Code: http://codepen.io/Nasir_T/pen/QKYPZk

Foundation Solution:

Using foundation, the first error i see is that your using a x-large-4 column class which does not exists in the foundation.css or is either a custom made col class. Anyway, i suggest you use the large-4 instead. Also remove the display:table from the .row class and change the .columns class as follows:

.columns {
    display:block;
    padding:0px !important;
}

Now for the same row height, i suggest you use the foundation.equalizer.js javascript. http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

E.g. Code: http://codepen.io/Nasir_T/pen/ALNZaw

Hope this helps.

edited Oct 24 '16 at 16:54

answered Oct 24 '16 at 14:39

Nasir T

2,603
1
9
15

Your solution does not keep all the columns the same height. If you add more content like 'Discover dramatic scenes Discover dramatic scenes Discover dramatic scenes' to the first column you will see it breaks. – lukehillonline Oct 24 '16 at 15:05
Ok. I have edited the codepen solution. Check the link again. I have used matchheight.js commonly the easiest and most reliable way to match row or colomn or any other div height. Hope this helps. P.S. Please download the jquery.matchHeight-min.js or use the cdn i used in the example. – Nasir T Oct 24 '16 at 15:36
And please remove the negative vote you gave me. Please give at least a chance to the guy to add or suggest another solution before down voting him. My solution is correct, the thing i missed was the fixed height 4 lines of code and its now in the codepen link i shared. Thanks. – Nasir T Oct 24 '16 at 15:40
@NasirT Now that your solution is correct i am happy to remove the down vote. Unfortunately using bootstrap is not an option as this is a existing build that i am adding to which uses Foundation Grid. Also using JS is not a favored solution. Seeing as this works I will keep this as a back up. Thanks. – lukehillonline Oct 24 '16 at 16:07
Thanks. Yeah i noticed you used foundation grid. Suggested bootstrap if possible. I will try to give you a work around for foundation grid as well when i get time and will add in the answer. – Nasir T Oct 24 '16 at 16:10
I have added the foundation grid solution as well in the answer. Please review it and let me know if this helps. – Nasir T Oct 24 '16 at 16:55
Thanks for adding the Foundation solution, `x-large-4` is custom. I like your solution it works well. It is a shame that JS is needed though. – lukehillonline Oct 25 '16 at 13:31

score 0 · Accepted Answer · answered Oct 25 '16 at 14:39

Credit goes to Per Salbark for linking to a solution within another question. I managed to get the result I wanted using the padding-bottom: 500em; margin-bottom: -500em; trick.

While this is a bit of a hacky solution it works great. I have also enhanced this to use display: table and display: inline-table which allows this to work very well responsively across multiple rows.

Here is my final code and a link to JS Fiddle.

.itineraries-hub__categories, #parent {
  width: 100%;
}

.row {
    display: table;
    overflow: hidden;
    width: 100%;
}
.columns, .col {
  display: inline-table;
  width: 33.33333%;
  padding-bottom: 500em;
  margin-bottom: -500em;
  background: #323945;
  
}

.category__link {
    cursor: pointer;
    display: block;
    overflow: hidden;
}

.category__image-container {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: url(/assets/images/resources/blank.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.category__image-container img {
    position: absolute;
    min-width: 100%;
}

.category__title {
    display: block;
    background: #323945;
    color: white;
    font-weight: 400;
    font-family: 'MuseoSansW01-Rounded900', sans-serif;
    font-size: 16px;
    line-height: 2;
    padding: 18px 14px 14px 26px;
    overflow: hidden;
}

.category__tag {
    float: right;
    display: inline-block;
    padding: 6px 12px;
    margin-top: -1px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    background: black;
    text-transform: uppercase;
    font-weight: 400;
    font-family: 'Proxima Nova W08 Reg', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: 'Proxima Nova W08 Bd', sans-serif;
    font-size: 13px;
}

@media only screen and (max-width: 700px) {
  .itineraries-hub__categories, #parent {
    overflow: hidden;
  }
  
  .row {
    overflow: visible;
  }
  
  .columns, .col {
    width: 50%;
  }
}

<section class="itineraries-hub__categories">
            <div class="categories__accordion-title button" hidden>
                View all Categories <span class="sprite white-arrow south"></span>
            </div>
            <div class="row">
                <div class="small-6 x-large-4 columns"><a class="category__link"><div class="category__image-container"><img alt="" src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/romantic ireland/article images/ireland-in-love/ireland-in-love-main.jpg"></div><span class="category__title">Spend time together<span class="category__tag">Family</span></span></a></div>
                <div class="small-6 x-large-4 columns"><a class="category__link"><div class="category__image-container"><img alt="" src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/landscapes/article images/w1400_a_new landscape_main.jpg"></div><span class="category__title">Discover dramatic scenes<span class="category__tag">Explore</span></span></a></div>
                <div class="small-6 x-large-4 columns"><a class="category__link"><div class="category__image-container"><img alt="" src="http://d5qsyj6vaeh11.cloudfront.net/images/destinations/dublin/dublin-main/dublin-city-teasers/places-to-visit-dublin-small.jpg"></div><span class="category__title">Embrace city life<span class="category__tag">City Break</span></span></a></div>
                <div class="small-6 x-large-4 columns"><a class="category__link"><div class="category__image-container"><img alt="" src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/spas/article images/w1100_b_car.jpg"></div><span class="category__title">Relax and unwind<span class="category__tag">Leisure</span></span></a></div>
                <div class="small-6 x-large-4 columns"><a class="category__link"><div class="category__image-container"><img alt="" src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/golf/article images/w401_c-golfing-golf-in-ireland_main.jpg"></div><span class="category__title">Take on a challenge<span class="category__tag">Activity</span></span></a></div>
                <div class="small-6 x-large-4 columns"><a class="category__link"><div class="category__image-container"><img alt="" src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/attractions built heritage/article images/w1500_n-main.jpg"></div><span class="category__title">Connect with the past<span class="category__tag">History</span></span></a></div>
            </div>
        </section>

https://jsfiddle.net/w8fcqhhj/

Thanks to everyone for all your help along the way.

How to responsively have a mix of odd and even columns with all columns staying the same height

2 Answers2

Bootstrap Solution:

Foundation Solution: