정렬

여기서 설명하는 요점은 justify-content: space-between를 사용하는 것입니다. 이 사용에서는 첫 번째와 마지막 하위 요소를 경계 상자 가장자리에 배치하고 나머지 공간은 요소 사이에 균등하게 분산됩니다. 이러한 카드의 경우 Flexbox 디스플레이 모드에 배치되며 방향은 flex-direction: column를 사용하여 열로 설정됩니다.

이렇게 하면 제목, 설명, 이미지 블록이 상위 카드 안의 세로 열에 배치됩니다. 그런 다음 justify-content: space-between를 적용하면 첫 번째 (제목)와 마지막 (이미지 블록) 요소가 Flex 컨테이너의 가장자리에 고정되고 이러한 요소 사이의 설명 텍스트는 각 엔드포인트와 동일한 간격으로 배치됩니다.

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

<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>

        .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
}