Grid와 object-fit으로 크기가 다른 이미지를 일정하게 배치합니다.
갤러리는 Grid로 열을 정의하고 이미지 컨테이너에 aspect-ratio를 줄 수 있습니다. object-fit:cover는 비율을 유지하며 상자를 채우되 일부가 잘릴 수 있습니다.
세 이미지는 원본 비율이 400×300 가로형, 더 납작한 500×240, 300×500 세로형으로 제각각이지만 width: 100%와 aspect-ratio: 1이 모두 칸 너비와 같은 높이의 정사각형으로 맞춥니다. object-fit: cover는 비율을 지킨 채 정사각형을 빈틈없이 채우므로 가로형은 좌우가, 세로형인 JS 이미지는 위아래가 잘리고 가운데 부분이 남습니다. 화면 너비가 520px 이하가 되면 미디어 쿼리가 열을 하나로 줄입니다.
열 수를 미디어 쿼리로 바꾸는 대신 grid-template-columns에 repeat(auto-fill, minmax(160px, 1fr))를 쓰면, 칸이 160px보다 좁아지지 않는 한도에서 들어갈 수 있는 만큼 열이 자동으로 생깁니다. 갤러리가 놓이는 자리의 너비가 바뀌어도 규칙을 따로 고칠 필요가 없습니다.
중요한 이미지가 cover로 잘릴 때 object-position이나 contain을 검토하세요.
직접 바꿔보세요aspect-ratio를 4/3으로 바꿔보세요.