CSS 그리드 rowspan / colspan 적용 안 되는 문제 해결법

grid 사용 시, span 옵션을 사용해 하나의 개체가 여러 개의 grid를 점유하게 만들 수 있다.

이것은 총 5개의 사진 중, 1번째 사진에는 grid-column: span 2를 주고 4번째 사진에  grid-column: span 2; grid-row: span 2; 옵션을 준 것이다.

그러나 위와 같이 사진 크기가 변하지 않는 문제가 발생했다.

다른 개체에 테스트해봤을 때 row span이 적용되지 않는 것은 아니었다.

실은 이 문제는 오류가 아니다. GPT에게 물어보면 다음과 같은 답변을 준다.

1. Grid 속성 충돌: 요소의 다른 스타일이나 부모 요소의 스타일이 grid 속성과 충돌할 수 있습니다. 이 경우, 다른 스타일을 주석 처리하거나 임시로 제거하여 충돌을 확인해보세요.
2. Grid 아이템 설정: Grid 아이템에 대한 설정이 올바르게 이루어졌는지 확인하세요. grid-column 및 grid-row 속성이 올바른 범위를 가지고 있는지 확인하십시오.
3. 컨테이너 설정: Grid 컨테이너의 설정이 올바르게 이루어졌는지 확인하세요. grid-template-columns 및 grid-template-rows 속성이 적절한 값으로 설정되어 있는지 확인합니다.

여기서 내 문제는 'Grid 속성 충돌' 이었다.

나는 div 높이를 조절하기 위해 height 속성을 주었다.
그래서 2행을 점유했지만 높이가 고정되어 있어서 계속 1줄만을 점유한 것으로 보인 것이다.
min-height로 바꾸면 의도대로 잘 작동한다.

같은 맥락에서,  grid-column: span 2; 로 설정했는데 너비가 변하지 않는다면 width 설정을 준 것은 아닌지 확인해 보면 좋을 것이다.