Как грамотно раздвинуть контент и заголовок в карточках

Question

Есть флекс секция со списком карточек. Нужно содержимое карточек раздвинуть так, чтоб заголовок остался внизу и занял все пустое пространство если оно есть. Уже пробовал все не могу сделать.

.lots {
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 692px;
  width: 1052px;
  margin: 180px auto auto;
}

.lots__heading {
  color: #000;
  font-size: 40px;
  font-weight: 700;
  padding-left: 40px;
  text-transform: uppercase;
}

.lots__card-list {
  list-style: none;
  display: flex;
  gap: 20px;
}

.lots__card-list-item {
  padding: 50px 40px;
  width: 335px;
  min-height: 563px;
}

.card-link {}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card__title {}

.lots__look-more-link {
  font-size: 20px;
  display: block;
  padding-left: 40px;
  border-bottom: 1.5px solid #000;
}

<section class="lots">
  <h2 class="lots__heading">lots</h2>
  <ul class="lots__card-list">
    <li class="lots__card-list-item card_type_film">
      <a href="" class="card-link">
        <article class="card">
          <h2 class="card__title">
            Фильм режиссёра, который бросил киношколу
          </h2>
          <p class="card__text">
            Не просто бросил, а ушёл с первой лекции. Какой была бы ваша ставка, если бы вы не знали, что режиссёр — Пол Томас Андерсон?
          </p>
        </article>
      </a>
    </li>
    <li class="lots__card-list-item card_type_book">
      <a href="" class="card-link">
        <article class="card">
          <h2 class="card__title">
            Книга, где описан один скучный день из жизни рекламного агента
          </h2>
          <p class="card__text">
            Объёмом почти в тысячу страниц. Иногда без знаков препинания и с переходами на древнеанглийский. В ней одновременно рассказывается о 16 июня 1904 года и об истории литературы, начиная с античных времён. И это всё накладывается на эпическую поэму Гомера.
            Сколько бы вы поставили на «Улисса» Джеймса Джойса?
          </p>
        </article>
      </a>
    </li>
    <li class="lots__card-list-item card_type_picture">
      <a href="" class="card-link">
        <article class="card">
          <h2 class="card__title">Картина, которую повторит даже 5-летний сын маминой подруги
          </h2>
          <p class="card__text">
            Ну действительно, там линия, тут кружочек, а здесь и вовсе что-то похожее на инфузорию-туфельку. Никаких полей, лесов, котиков... Сколько бы вы на такое поставили, если бы не знали, что это — одна из революционных работ Кандинского?
          </p>
        </article>
      </a>
    </li>
  </ul>
  <a href="" class="lots__look-more-link">посмотреть больше</a>
</section>

Answer 1

В .card добавил height: 100% так как если хотите, что бы flex растягивался на всю ширину всегда нужно вписывать ширину или высоту в зависимости от того, что вам нужно на 100%.
Это у display: block автоматом вставляется 100%, а вот у flex нет. Он вроде как и растягивает блоки поровну, но вот для внутренних элементов нет.
Также я бы посоветовал использовать display:grid с grid-template-columns: 1fr 1fr 1fr для формирования блоков. Таким образом вам не понадобится указывать ширину внутренним блокам. И вообще плохая практика при построении блоков использовать точные числа.

.lots {
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 692px;
  width: 1052px;
}

.lots__heading {
  color: #000;
  font-size: 40px;
  font-weight: 700;
  padding-left: 40px;
  text-transform: uppercase;
}

.lots__card-list {
  list-style: none;
  display: flex;
  gap: 20px;
}

.lots__card-list-item {
  padding: 50px 40px;
  width: 335px;
  background-color: green;
}

.card-link {
  color: white;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.card__title {}

.lots__look-more-link {
  font-size: 20px;
  display: block;
  padding-left: 40px;
  border-bottom: 1.5px solid #000;
}

<section class="lots">
  <h2 class="lots__heading">lots</h2>
  <ul class="lots__card-list">
    <li class="lots__card-list-item card_type_film">
      <a href="" class="card-link">
        <article class="card">
          <h2 class="card__title">
            Фильм режиссёра, который бросил киношколу
          </h2>
          <p class="card__text">
            Не просто бросил, а ушёл с первой лекции. Какой была бы ваша ставка, если бы вы не знали, что режиссёр — Пол Томас Андерсон?
          </p>
        </article>
      </a>
    </li>
    <li class="lots__card-list-item card_type_book">
      <a href="" class="card-link">
        <article class="card">
          <h2 class="card__title">
            Книга, где описан один скучный день из жизни рекламного агента
          </h2>
          <p class="card__text">
            Объёмом почти в тысячу страниц. Иногда без знаков препинания и с переходами на древнеанглийский. В ней одновременно рассказывается о 16 июня 1904 года и об истории литературы, начиная с античных времён. И это всё накладывается на эпическую поэму Гомера.
            Сколько бы вы поставили на «Улисса» Джеймса Джойса?
          </p>
        </article>
      </a>
    </li>
    <li class="lots__card-list-item card_type_picture">
      <a href="" class="card-link">
        <article class="card">
          <h2 class="card__title">Картина, которую повторит даже 5-летний сын маминой подруги
          </h2>
          <p class="card__text">
            Ну действительно, там линия, тут кружочек, а здесь и вовсе что-то похожее на инфузорию-туфельку. Никаких полей, лесов, котиков... Сколько бы вы на такое поставили, если бы не знали, что это — одна из революционных работ Кандинского?
          </p>
        </article>
      </a>
    </li>
  </ul>
  <a href="" class="lots__look-more-link">посмотреть больше</a>
</section>

БЛОГ НА HUSL

Как грамотно раздвинуть контент и заголовок в карточках

Ответы (1 шт):