1

I have flex items .item with flex-direction: column and I want each child item (.item__title, .item__description) to take equal vertical space depending on the highest one. So next item starts with same new row. I' trying following code: 

<article class="items">
<section class="item">
    <h2 class="item__title">Lorem ipsum dolor sit amet</h2>
    <p class="item__description">Lorem ipsum dolor sit amet.</p>
    <a class="item__more-button">See more</a>
</section>
<section class="item">
    <h2 class="item__title">Lorem ipsum dolor sit amet</h2>
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.</p>
    <a class="item__more-button">See more</a>
</section>
<section class="item">
    <h2 class="item__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt</h2>
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.</p>
    <a class="item__more-button">See more</a>
</section>
</article>


  .items {
  display: flex;
  }

  .item {
  margin: 0 15px;
  width: calc((100% - 2 * 15px) / 3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  }



  .item__title {
      flex: 1;
  }

  .item__description {
      flex: 1;
  }

But I want it to look like this picture:

enter image description here

How can I do this without setting heights?

user2950602
  • 395
  • 1
  • 7
  • 21

2 Answers2

1

just add justify-content: space-between; to your item class, your sections already have the same heigth

  .items {
  display: flex;
  }

  .item {
  margin: 0 15px;
  width: calc((100% - 2 * 15px) / 3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

}
.item.__title{
flex:1;
}
.item.__description {
      flex: 1;
  }
<article class="items">
<section class="item">
    <h2 class="item__title">Lorem ipsum dolor sit amet</h2>
    <p class="item__description">Lorem ipsum dolor sit amet.</p>
    <a class="item__more-button">See more</a>
</section>
<section class="item">
    <h2 class="item__title">Lorem ipsum dolor sit amet</h2>
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.</p>
    <a class="item__more-button">See more</a>
</section>
<section class="item">
    <h2 class="item__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt</h2>
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.</p>
    <a class="item__more-button">See more</a>
</section>
</article>
Renzo Calla
  • 7,486
  • 2
  • 22
  • 37
0

Try using grid-auto-rows: 1fr with display:grid for parent section and do not forget to set width to 100% for child section. Otherwise it's not going to give you what you want.

Working jsfiddle demo: https://jsfiddle.net/e63k17na/

UPDATE:

After looking at the screenshot I believe you want something like this: https://jsfiddle.net/e63k17na/1/

Just apply the same logic into subclass, which is "item" in this case.

.items{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr; 
    text-align:center;
  }

.item{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: 1fr;
}
hhk
  • 508
  • 7
  • 15