item의 시작·끝 선과 영역을 지정합니다.
grid-column과 grid-row는 선 번호 또는 이름으로 item이 차지할 범위를 정합니다. grid-area를 사용하면 이름 있는 페이지 영역과 개별 배치를 간결하게 표현할 수 있습니다.
이번 예제의 출발점은 grid-column:1 / 3;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 첫 item을 세 열 전체에 걸치게 하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
시각적 배치만 바꾸며 논리적 읽기 순서를 무시하지 마세요.
직접 바꿔보세요첫 item을 세 열 전체에 걸치게 하세요.