행이 고르지 않은 CSS 그리드(Pinterest 스타일)

Question

3열 다중 행 링크 그리드(img + 텍스트)를 만들려고 합니다. 문제는 내 이미지의 높이가 같지 않아서 다음과 같은 결과가 나온다는 것입니다.

이런 결과를 얻으려면 어떤 CSS 그리드 속성이 필요한지 찾으려고 합니다.

여러 개의 링크가 포함된 div를 3개(열당)로 만들어 보았으나 응답할 때 순서가 올바르지 않았습니다.

도와드릴까요? 매우 감사합니다.

Answer 1

내 생각에는 상위 div 안에 display: flex를 넣을 수 있을 것 같습니다. 그런 다음 각 열에 렌더링할 이미지 수를 추가하세요

으아악

이제 이미지 높이가 다를까 걱정할 필요가 없습니다.