item의 시작·끝 선과 영역을 지정합니다.
grid-column과 grid-row는 선 번호 또는 이름으로 item이 차지할 범위를 정합니다. grid-area를 사용하면 이름 있는 페이지 영역과 개별 배치를 간결하게 표현할 수 있습니다.
첫 항목 A는 grid-column: 1 / 3으로 1번 선부터 3번 선까지, 즉 두 열을 차지하고 B는 첫 행에 남은 셋째 칸으로 들어갑니다. C가 둘째 행 첫 칸을 채우면 마지막 항목 D는 2 / 4에 따라 둘째와 셋째 열을 차지해, 두 행이 A A B와 C D D 모양으로 빈칸 없이 맞물립니다.
span 2처럼 쓰면 시작 위치는 자동 배치에 맡기고 차지할 칸 수만 정합니다. 선 번호를 -1처럼 음수로 적으면 끝에서부터 세는데, 기준이 명시적 격자라서 grid-auto-rows로 자동 생긴 행의 끝에는 닿지 않습니다.
시각적 배치만 바꾸며 논리적 읽기 순서를 무시하지 마세요.
직접 바꿔보세요첫 item을 세 열 전체에 걸치게 하세요.