整列

ここで示す主なポイントは、justify-content: space-between の使用です。これは、最初と最後の子要素を境界ボックスの端に配置し、残りのスペースは要素間で均等に分配します。これらのカードは Flexbox 表示モードに配置され、flex-direction: column を使用して方向が列に設定されています。

これにより、タイトル、説明、画像ブロックが親カード内の縦方向の列に配置されます。次に、justify-content: space-between を適用すると、最初（title）と最後（画像ブロック）の要素が 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
}