CSS only solution to set “same height” row sections on a responsive grid

Question

Wanted: a CSS only solution to enable equal height grid \"sections\" on a per row basis, that is also responsive.

This diagram hopefully explains th

Answer 1

By giving the .items display: flex; flex-wrap: wrap; your item will become flex items and flow from left to right and wrap when there is no more space.

Then you give the .item display: flex; flex-direction: column;, which will make them a flex container as well, and by using column direction, its children will flow vertically, like block elements.

Finally you give the .item__content flex: 1;, which will make it take any remaining space, vertically, hence every row's item will have equal height.

Updated codepen

Stack snippet

.items {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
}

.item {
  display: flex;
  flex-direction: column;
  width: 25%;
  box-sizing: border-box;
  vertical-align: top;
  padding: 0 12px;
  margin: 24px -4px 24px 0;
}

@media (max-width: 600px) {
  .item {
    width: 50%;
  }
}

.item__heading {
  background-color: #d4d0f5;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}

.item__content {
  flex: 1 1 auto;                   /* IE need 1 1 auto */
  padding: 10px;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
}

.item__price {
  background-color: #e0f6d9;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}

  

    

      Item 1
    
    

      Some content that is not that long
    
    

      £99.99
    
  

  

    

      Item 2
    
    

      Some content that is longer than other items on the same row and sets the height of this section
    
    

      £69.99
    
  

  

    

      Item 3
    
    

      Some content that is not that long
    
    

      £69.99
    
  

  

    

      Item 4
    
    

      Some content that is not that long
    
    

      £109.99
    
  

  

    

      Item 5
    
    

      Some content that is a medium kind of length blah blah
    
    

      £29.99
    
  

  

    

      Item 6
    
    

      Some content that is not that long
    
    

      £99.99