Как выровнять блоки по высоте по отношению к другим

Question

Как выровнять блоки по высоте, чтобы в случае добавления текста высота была у всех одинакова. 1 Изображение как в данный момент. 2 изображение как нужно сделать.

Answer 1

Сделайте родителю display: flex, а кнопке (желательно, чтобы она была прямым дочерним ребёнком родителя) добавьте margin-top: auto.

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  width: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.image {
  display: block;
  width: 100%;
  height: 0;
  background: gray;
  margin-bottom: 10px;
  padding-top: 80%;
}

.text {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

.text span {
  display: block;
  width: 100%;
  height: 1em;
  border-radius: 3px;
  background: #333;
}

.text span:not(:last-child) {
  margin-bottom: .25em;
}

.button {
  display: block;
  width: 75%;
  height: 2em;
  border-radius: 5px;
  background: #09f;
  margin-top: auto;
}

<div class="cards">
  <div class="card">
    <div class="image"></div>
    <div class="text"><span></span></div>
    <div class="button"></div>
  </div>
  <div class="card">
    <div class="image"></div>
    <div class="text"><span></span><span></span></div>
    <div class="button"></div>
  </div>
  <div class="card">
    <div class="image"></div>
    <div class="text"><span></span><span></span><span></span></div>
    <div class="button"></div>
  </div>
</div>

БЛОГ НА HUSL

Как выровнять блоки по высоте по отношению к другим

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