Heading

Content

카드 제목행은 최대 크기로 주어(max-content) 늘어나는 것을 방지한다

카드 제목행은 최대 크기로 주어(max-content) 늘어나는 것을 방지한다

Heading

이미지 트랙은 300px 높이로 고정하고, 컨텐츠가 있는 맨 아래 행은 1fr로 주어 나머지 공간을 채운다. 명시적으로 정의된 크기를 가진 3개 외에 추가되는 자식요소(footer)는 암시적 그리드에 (크기가 자동 조절되는)행을 생성한다

        
            .cards { /* 카드 컨테이너 */
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                grid-gap: 20px; /* 카드간 간격 */
            } .card { /* 각 카드 컬럼 */
                display: grid;
                grid-template-rows: max-content 300px 1fr;
            } .card img {
                object-fit: cover; width: 100%; height: 100%; /* 카드 이미지 */
            }