Search code examples
cssflexbox

How to make equal height cards when flex direction is set to column?

I am currently displaying some cards on mobile and would like each card to be the same height.

ul {
   display:flex;
   flex-wrap:wrap;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
}

ul li {
    flex-grow: 1;
    border:1px solid #000;
}

However, the cards are all different heights (inherited from the image and text) and not like in the attached image.

enter image description here

Solution

  • This is a CSS grid job

    ul {
  display: grid;
  grid-auto-rows: 1fr; /* equal height rows */
  gap: 10px;
  max-width: 300px;
}

ul li {
  border: 1px solid #000;
  display: grid;
  align-content: start;
}
    <ul>
  <li>
    <img src="https://picsum.photos/id/91/300/200" alt="A man holding a camera">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus auctor, tortor eu eleifend lobortis, nibh nibh blandit nunc, non malesuada nulla turpis nec dui. Sed tincidunt et sapien vestibulum ullamcorper. non malesuada nulla turpis nec dui. Sed
      tincidunt et sapien vestibulum ullamcorper.
    </div>
  </li>
  <li><img src="https://picsum.photos/id/91/300/200" alt="A man holding a camera">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus auctor, tortor eu eleifend lobortis, nibh nibh blandit nunc, non
    </div>
  </li>
</ul>