Css repeat(반복횟수, 트랙세트) 함수를 사용한 아래 코드는 최소 200px, 최대 1fr 크기에 맞는 만큼의 트랙을 생성하는데, 그리드가 200px 트랙을 배치하고 남은 공간은 모두 균등하게 분배된다 - 곧, 미디어쿼리가 필요없는 2차원 반응형 레이아웃인데, 아래에서는 뷰포트 너비가 변경됨에 따라 그에 맞추어 적절히 오르락 내리락하면서 재배치된다:

Item 1
Item 2
Item 3
Item 4
Item 5
    
        .container_autofill {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
        }

➥ Css의 함수와 Css auto-fill 및 auto-fit 키워드를 결합할 수도 있는데, 이 auto-fill 과 auto-fit 사이에는 미묘한 차이점이 존재한다. 곧, auto-fill 에서는 비워진 공간이 있는 반면, auto-fit 에서는 빈 공간 없이 꽉 채워진다 - 이는 남은 공간을 모두 차지하도록 트랙이 커짐을 의미한다 ← 단, 첫 행 트랙이 다 채워지는 경우라면; 둘 사이에는 아무런 차이가 없다!

Item 1
Item 2
Item 3
    
        :root {
            --var-repeat_ex: auto-fill;
        } .container_autofit {
            display: grid;
            grid-template-columns: repeat(var(--var-repeat_ex), minmax(100px, 1fr));
            grid-template-rows: 100px auto;
            gap: 10px;
        }
    

    
        const autofit_switcher= document.querySelector(".switcher_autofit")
        const root= document.documentElement
        
        autofit_switcher.addEventListener("change", function (e) {
            root.style.setProperty("--var-repeat_ex", e.target.value)
        });