CSS 예제 11 / 20
칸을 여러 개 합치거나(span), 정확한 시작·끝 라인 번호로 위치를 지정할 수 있습니다. 갤러리 레이아웃을 만들어봅니다.
grid-column
span
grid-row
💡 이렇게 바꿔보세요
grid-column: span 2 는 '지금 위치부터 가로로 2칸' — 라인 번호를 몰라도 편해요- 정확한 위치가 필요하면
grid-column: 1 / 3 (1번 선에서 3번 선까지) 처럼 명시할 수 있어요
- 이름 붙인 영역(
grid-template-areas)으로 헤더/사이드바 레이아웃 짜는 건 css-intro 상단의 flexbox-grid 도구에서 체험해보세요
← CSS 예제 목록