[CSS] grid-template-columns: repeat()로 표시되는 이미지 개수 설정

아직 미디어 쿼리에 대해 정확히 이해하지 못한 상태로 사용해보는 중이므로 틀린 부분이 있을 수도 있음

내가 원하는 건 휠을 내려서 화면을 축소하면 이미지가 여러 장이, 휠을 올려서 화면을 확대하면 이미지 갯수가 줄어들다가 마지막에는 한 장이 크게 보이는 걸 바랐다.

⬆ 기본 설정

⬆ 화면을 확대했을 때

⬆ 화면을 축소했을 때

아래는 설정을 위한 css 코드

.outline {
    display: grid; /* Grid 레이아웃 */
    gap: 1.5rem; /* 이미지 간 간격 */
    grid-template-columns: repeat(3, 1fr); /* 기본 3개 */
    box-sizing: border-box;
    transition: all 0.3s ease; /* 부드러운 레이아웃 전환 */
}

@media (min-width: 1400px) {
    .outline {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1800px) {
    .outline {
        grid-template-columns: repeat(5, 1fr);
    }
}
@media (max-width: 1200px) {
    .outline {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .outline {
        grid-template-columns: repeat(1, 1fr);
    }
}

기본은 3개로 설정되어 있지만, 태블릿과 같이 화면이 작은 디바이스로 보면 2개부터 나온다.
최소 1개에서 최대 5개로 설정했으며 max-width, min-width에 맞춰 개수를 조정할 수 있다.