CODEWITHSUNDEEP
htmlcss
SShine2
SShine2

Reputation: 65

Making responsive grid columns have the same height

I am using the responsive grid system from, well, responsivegridsystem.com and am running into an issue. I am doing multiple 2 column grids on a page (one under another), but next to each other these columns aren't the same height, which I want. Is there a way to make the columns match each other so, for instance, have the smaller one meet the height of the longer one without having to set strict heights? Thanks!

/*  SECTIONS  */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}


/*  COLUMN SETUP  */

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}

.col:first-child {
  margin-left: 0;
}


/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
  /* For IE 6/7 */
}


/*  GRID OF TWO  */

.span_2_of_2 {
  width: 100%;
}

.span_1_of_2 {
  width: 49.2%;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0 1% 0%;
  }
}

@media only screen and (max-width: 480px) {
  .span_2_of_2,
  .span_1_of_2 {
    width: 100%;
  }
}
<div class="section group">
  <div class="col span_1_of_2">
    This is column 1
  </div>
  <div class="col span_1_of_2">
    This is column 2
  </div>
</div>

Upvotes: 0

Views: 215

Answers (2)

Raphael Cunha
Raphael Cunha

Reputation: 1114

Patrick is right. You need to use flex-box in order to achieve that. Here's a really simple snip of flex-box using your code.

/*  SECTIONS  */
.section {
display: flex;
clear: both;
padding: 0px;
margin: 0px;
}

.bg1 {
  background-color: blue;
}

.bg2 {
  background-color: yellow;
}

/*  COLUMN SETUP  */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWO  */
.span_2_of_2 {
    width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.col { 
    margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}
<div class="section group">
 <div class="col span_1_of_2 bg1">
  This is column 1
 </div>
<div class="col span_1_of_2 bg2">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet odio scelerisque, sollicitudin metus sit amet, aliquam libero. Vestibulum convallis sapien lacus,
 </div>
</div>

Upvotes: 2

Patrick Nouvion
Patrick Nouvion

Reputation: 34

Unless you are using flex-box you are not going to be able to get your columns to have the same height with just css ... in the past I have solved this problem using javascript and by creating a utility along the lines of for each dom element with the class .match-height look at the parent and find the tallest child, get its height and apply it to the first descendants.

I am on my work pc so I don't have code I can share but it looks like there are plugins doing similar things: http://brm.io/jquery-match-height/

Also you should change the title of your question to be: Making responsive grid columns have the same height

As the current title might be confusing.

Upvotes: 1

Related Questions