БЛОГ НА HUSL


Как правильно задать высоту карточки?

Автор вопроса: Андрей Баев

Мне необходимо сверстать адаптивный список из восьми горизонтальных карточек,расположенных по две в строке, и имеющих по макету высоту 140px. Однако со свойством min-height: 140px; высота карточек получается больше. уменьшение значения min-height ничего не дает - высота карточки не меняется. Явно задавать height: 140px; нельзя так как верстка должна быть резиновой. Как задать высоту карточек правильно?

:root {
  --gap: 30px;
}

.section-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.podcasts-list {
  width: 100%;
  gap: var(--gap);
  row-gap: var(--gap);
  column-gap: var(--gap);
  --offsets: 1;
}

.podcasts-list__item {
  width: calc((100% - (var(--gap) * var(--offsets))) / (var(--offsets) + 1));
}

.podcast-card {
  display: flex;
  min-height: 140px;
  background-color: var(--white);
}

.podcast-card__left {
  position: relative;
  min-height: 100%;
  flex-basis: 20.74%;
  overflow: hidden;
}

.podcast-card__date {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 51px;
  max-height: 16px;
  overflow: hidden;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 8px;
  padding-right: 9px;
  font-size: 10px;
  line-height: 100%;
  color: var(--black);
  background-color: var(--light-color);
}

.podcast-card__img {
  object-fit: cover;
}

.podcast-card__right {
  padding-top: 40px;
  padding-left: 30px;
  padding-right: 28px;
  padding-bottom: 40px;
}

.podcast-card__time {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  line-height: 100%;
  color: var(--black);
}

.podcast-card__title {
  margin-bottom: 1px;
  font-weight: 400;
  font-size: 20px;
  color: var(--black);
  outline: none;
}

.podcast-card__text {
  font-size: 16px;
  line-height: normal;
  color: var(--text-gray);
}
<ul class="section-list podcasts-list">
  <li class="podcasts-list__item podcasts-list__item_1">
    <div class=" podcast-card podcast-card_1">
      <div class="podcast-card__left">
        <picture class="podcast-card__picture">
          <source srcset="img/podcasts__1_320.jpg" media="(max-width: 320px)">
          <img class="podcast-card__img" src="img/podcasts__1.jpg" alt="Lorem ipsum">
        </picture>
        <div class="podcast-card__date podcast-card__date_1">
          14&nbsp;июня
        </div>
      </div>
      <div class="podcast-card__right">
        <time class="podcast-card__time" datetime="2024-06-14T15:43">
                  15:43
                </time>
        <h3 class="title podcast-card__title">
          Lorem Ipsum
        </h3>
        <p class="text podcast-card__text">
          Lorem ipsum
        </p>
      </div>
    </div>
  </li>
  <li class="podcasts-list__item podcasts-list__item_2">
    <div class=" podcast-card podcast-card_2">
      <div class="podcast-card__left">
        <picture class="podcast-card__picture">
          <source srcset="img/podcasts__2_320.jpg" media="(max-width: 320px)">
          <img class="podcast-card__img" src="img/podcasts__2.jpg" alt="Lorem ipsum">
        </picture>
        <div class="podcast-card__date podcast-card__date_2">
          11&nbsp;июня
        </div>
      </div>
      <div class="podcast-card__right">
        <time class="podcast-card__time" datetime="2024-06-11T05:32">
                  5:32
                </time>
        <h3 class="title podcast-card__title">
          Lorem ipsum
        </h3>
        <p class="text podcast-card__text">
          Lorem ipsum
        </p>
      </div>
    </div>
  </li>
  <li class="podcasts-list__item podcasts-list__item_3">
    <div class=" podcast-card podcast-card_3">
      <div class="podcast-card__left">
        <picture class="podcast-card__picture">
          <source srcset="img/podcasts__3_320.jpg" media="(max-width: 320px)">
          <img class="podcast-card__img" src="img/podcasts__3.jpg" alt="Lorem ipsum">
        </picture>
        <div class="podcast-card__date podcast-card__date_3">
          8&nbsp;июня
        </div>
      </div>
      <div class="podcast-card__right">
        <time class="podcast-card__time" datetime="2024-06-08T08:54">
                  8:54
                </time>
        <h3 class="title podcast-card__title">
          Lorem ipsum
        </h3>
        <p class="text podcast-card__text">
          Lorem ipsum
        </p>
      </div>
    </div>
  </li>
  <li class="podcasts-list__item podcasts-list__item_4">
    <div class=" podcast-card podcast-card_4">
      <div class="podcast-card__left">
        <picture class="podcast-card__picture">
          <source srcset="img/podcasts__4_320.jpg" media="(max-width: 320px)">
          <img class="podcast-card__img" src="img/podcasts__4.jpg" alt="Lorem ipsum">
        </picture>
        <div class="podcast-card__date podcast-card__date_4">
          5&nbsp;июня
        </div>
      </div>
      <div class="podcast-card__right">
        <time class="podcast-card__time" datetime="2024-06-05T09:04">
                  9:04
                </time>
        <h3 class="title podcast-card__title">
          Lorem ipsum
        </h3>
        <p class="text podcast-card__text">
          Lorem ipsum
        </p>
      </div>
    </div>
  </li>
  <li class="podcasts-list__item podcasts-list__item_5">
    <div class=" podcast-card podcast-card_5">
      <div class="podcast-card__left">
        <picture class="podcast-card__picture">
          <source srcset="img/podcasts__5_320.jpg" media="(max-width: 320px)">
          <img class="podcast-card__img" src="img/podcasts__5.jpg" alt="Lorem ipsum">
        </picture>
        <div class="podcast-card__date podcast-card__date_5">
          2&nbsp;июня
        </div>
      </div>
      <div class="podcast-card__right">
        <time class="podcast-card__time" datetime="2024-06-02T07:03">
                  15:43
                </time>
        <h3 class="title podcast-card__title">
          Lorem ipsum
        </h3>
        <p class="text podcast-card__text">
          Lorem ipsum
        </p>
      </div>
    </div>
  </li>
  <li class="podcasts-list__item podcasts-list__item_6">
    <div class=" podcast-card podcast-card_6">
      <div class="podcast-card__left">
        <picture class="podcast-card__picture">
          <source srcset="img/podcasts__6_320.jpg" media="(max-width: 320px)">
          <img class="podcast-card__img" src="img/podcasts__6.jpg" alt="Lorem ipsum">
        </picture>
        <div class="podcast-card__date podcast-card__date_6">
          28&nbsp;мая
        </div>
      </div>
      <div class="podcast-card__right">
        <time class="podcast-card__time" datetime="2024-05-08T09:15">
                  9:15
                </time>
        <h3 class="title podcast-card__title">
          Lorem ipsum
        </h3>
        <p class="text podcast-card__text">
          Lorem ipsum
        </p>
      </div>
    </div>
  </li>
  <li class="podcasts-list__item podcasts-list__item_7">
    <div class=" podcast-card podcast-card_7">
      <div class="podcast-card__left">
        <picture class="podcast-card__picture">
          <source srcset="img/podcasts__7_320.jpg" media="(max-width: 320px)">
          <img class="podcast-card__img" src="img/podcasts__7.jpg" alt="Lorem ipsum">
        </picture>
        <div class="podcast-card__date podcast-card__date_7">
          22&nbsp;мая
        </div>
      </div>
      <div class="podcast-card__right">
        <time class="podcast-card__time" datetime="2024-05-22T16:04">
                  16:04
                </time>
        <h3 class="title podcast-card__title">
          Lorem ipsum
        </h3>
        <p class="text podcast-card__text">
          Lorem ipsum
        </p>
      </div>
    </div>
  </li>
  <li class="podcasts-list__item podcasts-list__item_8">
    <div class=" podcast-card podcast-card_8">
      <div class="podcast-card__left">
        <picture class="podcast-card__picture">
          <source srcset="img/podcasts__8_320.jpg" media="(max-width: 320px)">
          <img class="podcast-card__img" src="img/podcasts__8.png" alt="Lorem ipsum">
        </picture>
        <div class="podcast-card__date podcast-card__date_8">
          18&nbsp;мая
        </div>
      </div>
      <div class="podcast-card__right">
        <time class="podcast-card__time" datetime="2024-05-18T06:55">
                  6:55
                </time>
        <h3 class="title podcast-card__title">
          Lorem ipsum
        </h3>
        <p class="text podcast-card__text">
          Lorem ipsum
        </p>
      </div>
    </div>
  </li>
</ul>


Источник

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

Автор решения: Евгений Ли

Вот вроде что вам нужно. Минимум кода css через display: grid;

ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
}
li {
  border: 1px solid black;
  padding: 5px;
  border-radius: 5px;
  list-style: none;
  background-color: yellow;
}
<ul class="section-list podcasts-list">
  <li class="podcasts-list__item podcasts-list__item_1">
    <div class=" podcast-card podcast-card_1">
      <div class="podcast-card__left">
        <picture class="podcast-card__picture">
          <source srcset="img/podcasts__1_320.jpg" media="(max-width: 320px)">
          <img class="podcast-card__img" src="img/podcasts__1.jpg" alt="Lorem ipsum">
        </picture>
        <div class="podcast-card__date podcast-card__date_1">
          14&nbsp;июня
        </div>
      </div>
      <div class="podcast-card__right">
        <time class="podcast-card__time" datetime="2024-06-14T15:43">
                  15:43
                </time>
        <h3 class="title podcast-card__title">
          Lorem Ipsum
        </h3>
        <p class="text podcast-card__text">
          Lorem ipsum
        </p>
      </div>
    </div>
  </li>
  <li class="podcasts-list__item podcasts-list__item_2">
    <div class=" podcast-card podcast-card_2">
      <div class="podcast-card__left">
        <picture class="podcast-card__picture">
          <source srcset="img/podcasts__2_320.jpg" media="(max-width: 320px)">
          <img class="podcast-card__img" src="img/podcasts__2.jpg" alt="Lorem ipsum">
        </picture>
        <div class="podcast-card__date podcast-card__date_2">
          11&nbsp;июня
        </div>
      </div>
      <div class="podcast-card__right">
        <time class="podcast-card__time" datetime="2024-06-11T05:32">
                  5:32
                </time>
        <h3 class="title podcast-card__title">
          Lorem ipsum
        </h3>
        <p class="text podcast-card__text">
          Lorem ipsum
        </p>
      </div>
    </div>
  </li>
  <li class="podcasts-list__item podcasts-list__item_3">
    <div class=" podcast-card podcast-card_3">
      <div class="podcast-card__left">
        <picture class="podcast-card__picture">
          <source srcset="img/podcasts__3_320.jpg" media="(max-width: 320px)">
          <img class="podcast-card__img" src="img/podcasts__3.jpg" alt="Lorem ipsum">
        </picture>
        <div class="podcast-card__date podcast-card__date_3">
          8&nbsp;июня
        </div>
      </div>
      <div class="podcast-card__right">
        <time class="podcast-card__time" datetime="2024-06-08T08:54">
                  8:54
                </time>
        <h3 class="title podcast-card__title">
          Lorem ipsum
        </h3>
        <p class="text podcast-card__text">
          Lorem ipsum
        </p>
      </div>
    </div>
  </li>
  <li class="podcasts-list__item podcasts-list__item_4">
    <div class=" podcast-card podcast-card_4">
      <div class="podcast-card__left">
        <picture class="podcast-card__picture">
          <source srcset="img/podcasts__4_320.jpg" media="(max-width: 320px)">
          <img class="podcast-card__img" src="img/podcasts__4.jpg" alt="Lorem ipsum">
        </picture>
        <div class="podcast-card__date podcast-card__date_4">
          5&nbsp;июня
        </div>
      </div>
      <div class="podcast-card__right">
        <time class="podcast-card__time" datetime="2024-06-05T09:04">
                  9:04
                </time>
        <h3 class="title podcast-card__title">
          Lorem ipsum
        </h3>
        <p class="text podcast-card__text">
          Lorem ipsum
        </p>
      </div>
    </div>
  </li>
  <li class="podcasts-list__item podcasts-list__item_5">
    <div class=" podcast-card podcast-card_5">
      <div class="podcast-card__left">
        <picture class="podcast-card__picture">
          <source srcset="img/podcasts__5_320.jpg" media="(max-width: 320px)">
          <img class="podcast-card__img" src="img/podcasts__5.jpg" alt="Lorem ipsum">
        </picture>
        <div class="podcast-card__date podcast-card__date_5">
          2&nbsp;июня
        </div>
      </div>
      <div class="podcast-card__right">
        <time class="podcast-card__time" datetime="2024-06-02T07:03">
                  15:43
                </time>
        <h3 class="title podcast-card__title">
          Lorem ipsum
        </h3>
        <p class="text podcast-card__text">
          Lorem ipsum
        </p>
      </div>
    </div>
  </li>
  <li class="podcasts-list__item podcasts-list__item_6">
    <div class=" podcast-card podcast-card_6">
      <div class="podcast-card__left">
        <picture class="podcast-card__picture">
          <source srcset="img/podcasts__6_320.jpg" media="(max-width: 320px)">
          <img class="podcast-card__img" src="img/podcasts__6.jpg" alt="Lorem ipsum">
        </picture>
        <div class="podcast-card__date podcast-card__date_6">
          28&nbsp;мая
        </div>
      </div>
      <div class="podcast-card__right">
        <time class="podcast-card__time" datetime="2024-05-08T09:15">
                  9:15
                </time>
        <h3 class="title podcast-card__title">
          Lorem ipsum
        </h3>
        <p class="text podcast-card__text">
          Lorem ipsum
        </p>
      </div>
    </div>
  </li>
  <li class="podcasts-list__item podcasts-list__item_7">
    <div class=" podcast-card podcast-card_7">
      <div class="podcast-card__left">
        <picture class="podcast-card__picture">
          <source srcset="img/podcasts__7_320.jpg" media="(max-width: 320px)">
          <img class="podcast-card__img" src="img/podcasts__7.jpg" alt="Lorem ipsum">
        </picture>
        <div class="podcast-card__date podcast-card__date_7">
          22&nbsp;мая
        </div>
      </div>
      <div class="podcast-card__right">
        <time class="podcast-card__time" datetime="2024-05-22T16:04">
                  16:04
                </time>
        <h3 class="title podcast-card__title">
          Lorem ipsum
        </h3>
        <p class="text podcast-card__text">
          Lorem ipsum
        </p>
      </div>
    </div>
  </li>
  <li class="podcasts-list__item podcasts-list__item_8">
    <div class=" podcast-card podcast-card_8">
      <div class="podcast-card__left">
        <picture class="podcast-card__picture">
          <source srcset="img/podcasts__8_320.jpg" media="(max-width: 320px)">
          <img class="podcast-card__img" src="img/podcasts__8.png" alt="Lorem ipsum">
        </picture>
        <div class="podcast-card__date podcast-card__date_8">
          18&nbsp;мая
        </div>
      </div>
      <div class="podcast-card__right">
        <time class="podcast-card__time" datetime="2024-05-18T06:55">
                  6:55
                </time>
        <h3 class="title podcast-card__title">
          Lorem ipsum
        </h3>
        <p class="text podcast-card__text">
          Lorem ipsum
        </p>
      </div>
    </div>
  </li>
</ul>

→ Ссылка
Автор решения: Андрей Баев

Решение нашел самостоятельно - если карточке задать font-size: 0;, то она по высоте точно соответствует заданному min-height.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.