그리드 래퍼

        
            body { max-width: 960px; margin: 0 auto; }

            .grid {
                margin: 0 auto; max-width: 75vw; /* 화면 정중앙에 뷰포트에 따라 유동적인 75vw 크기로 배치한다 */
                display: grid;
                grid-template-columns: minmax(20px, 1fr) repeat(6, minmax(0, 60px)) minmax(20px, 1fr); /* 1/6/1 컬럼 */
                grid-auto-rows: minmax(50px, auto);
                grid-gap: 10px;
            } .grid > * { border: 2px solid rgb(95 97 110); border-radius: 0.5em; padding: 20px; }

            .wrapper { grid-column: 2 / -2; }
            .left-edge { grid-column: 1 / -4; }
            .right-wrapper { grid-column: 4 / -1; }
            .full-width { grid-column: 1 / -1; }
        
    

☞ 맨 바깥쪽 앞/뒤 컬럼의 최대 크기는 1fr 이며, 이는 그리드 컨테이너에서 사용 가능한 나머지 공간을 채우기 위해 각각 확장됨을 의미한다!