React에서 Pinterest와 같은 동적 이미지의 CSS 그리드 구현

Question

그래서 CSS Grid를 이용해 핀터레스트 같은 이미지 갤러리를 만들어 보려고 합니다. 따라서 높이가 다른 사진이 나란히 있을 수 있으며 각 사진은 빈 공간을 차지할 수 있습니다. 그러나 내가 본 모든 예제는 원하는 높이에 따라 각 이미지에 다른 클래스를 추가하는 반면, 나는 데이터베이스에서 이미지를 동적으로 추가하고 싶습니다.

이것을 시도했습니다:

으아아아

내 CSS 파일:

으아아아

그래서 작은 사진은 같은 줄에 있고 큰 사진은 다른 줄에 있는데 무작위로 나왔으면 좋겠어요.

각 이미지마다 다른 클래스를 추가하지 않고 이를 달성할 수 있는 방법이 있나요?

Answer 1

Pinterst는 수직 정렬을 사용합니다. 따라서 복제하려면 인접하고 고정된 너비를 갖는 수직 상자를 만들어야 합니다. 화면 크기에 맞게 행을 최대한 많이 표시합니다. (Pinterest 창의 크기를 조정하면 전체 페이지가 다시 생성되지만 이는 귀하의 질문 범위를 벗어난 것 같습니다) 따라서 행 하나와 긴 열 하나가 있는 div 또는 표를 사용하는 것이 좋습니다.

으아악

물론 역동적이죠. (작은 화면을 위해 3개의 열로 구성된 긴 행을 만들었습니다.) 여기에서 tr의 너비를 200px로 설정하고 이미지의 너비를 100%로 설정하여 각 열에 이미지를 추가할 수 있습니다.