Выровнять высоту дочерних блоков разных блоков CSS (flex / grid)

Question

Привет, ребята! У меня вопрос. Я хотел бы сделать ту же разметку, что и на картинка (НАЖМИТЕ И СМОТРИТЕ !!!). Проблема в том, что серая линия между верхней частью и нижней частью карты карт на одном уровне должен быть выровнен. Как вы видите на картинке на дорожке первой карты, серая линия ниже из-за большего размера текста на второй картинке. А на дорожке второй карты серая линия выше, потому что нет переполненного текста. Мы можем использовать flex и grid.

<div class="cat-cards">
        <div class="cat-card">
            <img src="">
            <div class="short-description">
                short
            </div>
            <div class="long-description">
                long
            </div>
        </div>
        <div class="cat-card"></div>
        <div class="cat-card"></div>
    </div>

Я представлял, что база должна быть такой, но вы можете написать любые предложения, которые используют grid и flex

.cat-cards
{
    display: flex;
}

.cat-card
{
    display: grid;
    grid-template-areas: 'image' 'short'
                     'long' 'long';
   }

.cat-card img
{
    grid-area: image;
}

.cat-card .short-description
{
    grid-area: short;
}

.cat-card .long-description
{
    grid-area: long;
}

Answer 1

Если я правильно интерпретировал ваш запрос, я считаю, что вы хотите, чтобы все строки расширялись одинаково, если содержимое одной строки увеличивается по высоте.

Пример

.Grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr
}

.cat-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-gap: 10px;
  border: 1px solid #ddd;
  padding: 10px;
}

.cat-card img {  
  max-width: 200px;
}

.long-description{
  grid-column: 1 / 3;
  border-top:1px solid #ddd;
}

<div class="Grid">

  <div class="cat-card">
    <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. 
    </div>
  </div>

  <div class="cat-card">
    <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
      <br/>Title:5
      <br/>Title:6
      <br/>Title:7
      <br/>Title:8
      <br/>Title:9
      <br/>Title:10
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. 
    </div>
  </div>

  <div class="cat-card">
    <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. 
    </div>
  </div>

  <div class="cat-card">
    <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. 
    </div>
  </div>

</div>

Answer 2

Ваш родительский контейнер всегда должен содержать оператор display:flex;. Это гарантирует, что любые дети будут применять его тоже. Использование параметра inline flex для ваших детей в оболочке с чем-то вроде flex:50%, примененным к обоим, должно помочь.

Вы можете найти больше ресурсов ниже, и я также отредактирую код, как только закончу работать для вас.

http://flexboxgrid.com/

https://css -tricks.com / сниппеты / CSS / а-руководство к Flexbox /