對齊

這裡展示的主要點是使用 justify-content: space-between，將第一個和最後一個子項元素置於其定界框的邊緣，剩餘空間會平均分配到元素之間。這類資訊卡會以 Flexbox 顯示模式放置，且使用 flex-direction: column 將方向設為資料欄。

這會將標題、說明和圖片區塊置於母資訊卡的垂直欄中。然後，套用 justify-content: space-between 會將第一個 (標題) 和最後一個 (圖片區塊) 元素固定在 Flex 容器的邊緣，而這些元素之間的說明文字，將加上每個端點的間距。

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

HTML

<div class="container">
  <div class="card">
    <h3>Title - Card 1</h3>
    <p contenteditable>Medium length description with a few more words here.</p>
    <div class="visual"></div>
  </div>
  <div class="card">
    <h3>Title - Card 2</h3>
    <p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
    <div class="visual"></div>
  </div>
  <div class="card">
    <h3>Title - Card 3</h3>
    <p contenteditable>Short Description.</p>
    <div class="visual"></div>
  </div>
</div>

CSS

        .container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.visual {
  height: 100px;
  width: 100%;
}

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

h3 {
  margin: 0
}