CSS Grid Layout은 웹 페이지를 행(row)과 열(column) 단위의 격자로 배치할 수 있는 강력한 레이아웃 시스템
▶️
display: grid;
를 사용하면 요소들을 쉽게 정렬하고 배치할 수 있어!
📌 CSS Grid는 2차원 레이아웃 시스템
grid-container
→ grid가 적용된 요소grid-item
→ grid가 적용된 요소의 자식 요소들grid-line
→ grid-item 사이의 경계를 의미grid-number
→ 해당 grid-line이 몇번째 line인지를 의미grid의 행&열의 개수 및 크기를 지정할 수 있음
grid-template-rows : 1fr 2fr 200px
grid-template-columns : 1fr 2fr 200px
이 때 사용되는 fr 이란 fraction(분수)의 약자
분수라는 이름의 뜻으로 유추할 수 있듯 grid-template에서 사용할 수 있는 비율 단위
grid-template에는 repeat()
이라는 반복 함수도 써줄 수 있음
repeat(a, b)라고 입력하면, b규격의 grid-template을 a개 생성한다는 의미
grid-column 과 grid-row 는 grid-item에 줄 수 있는 속성
각각의 grid-item이 열과 행 방향으로 얼마만큼의 영역을 차지할 지 정의
이 때, 그 값에는 시작점이 되는 grid-number와 종료지점이 되는 grid-number를 입력
.container {
display: grid;
grid-template-columns: 100px 200px auto; /* 3개의 열 (100px, 200px, 나머지 자동) */
grid-template-rows: 50px auto 100px; /* 3개의 행 */
gap: 10px; /* 요소 간격 */
}
✅ 그리드 컨테이너 (.container
)를 설정하면 내부 아이템이 자동으로 배치됨
grid-template-columns
로 열 크기 조정.container {
display: grid;
grid-template-columns: 200px 300px 100px; /* 3개의 열 크기 고정 */
}
✔ 1열: 200px
/ 2열: 300px
/ 3열: 100px
fr
(fraction) 비율로 크기 조정.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
✔ 비율로 크기 자동 조정 (1:2:1
)
repeat()
로 반복.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3개의 열, 동일한 크기 */
}
✔ 3개의 열을 같은 크기로 자동 분배
grid-template-rows
로 행 크기 조정.container {
display: grid;
grid-template-rows: 100px auto 50px;
}
✔ 1행: 100px
/ 2행: 자동 크기 조정 / 3행: 50px
grid-column
과 grid-row
로 아이템 배치.item1 {
grid-column: 1 / 3; /* 1번째부터 3번째 열까지 차지 */
grid-row: 1 / 2; /* 1번째 행만 차지 */
}
✔ grid-column: start / end;
✔ grid-row: start / end;
✔ 그리드의 특정 위치를 지정 가능
grid-area
로 자유로운 배치.item1 { grid-area: header; }
.item2 { grid-area: main; }
.item3 { grid-area: sidebar; }
.item4 { grid-area: footer; }
.container {
display: grid;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
grid-template-columns: 2fr 1fr;
grid-template-rows: auto;
}
✔ grid-template-areas
를 사용하면 직관적인 배치 가능! ✅
justify-content
& align-content
(정렬)justify-content
).container {
display: grid;
justify-content: center; /* 왼쪽, 가운데, 오른쪽 정렬 */
}
✔ start
| center
| end
| space-between
| space-around
align-content
).container {
display: grid;
align-content: center; /* 위쪽, 가운데, 아래 정렬 */
}
✔ start
| center
| end
| space-between
| space-around
속성 | 설명 |
---|---|
display: grid; | Grid 레이아웃 활성화 |
grid-template-columns | 열 크기 설정 |
grid-template-rows | 행 크기 설정 |
grid-column | 아이템이 차지할 열 범위 지정 |
grid-row | 아이템이 차지할 행 범위 지정 |
grid-gap (or gap ) | 아이템 간 간격 조정 |
grid-template-areas | 레이아웃을 직관적으로 배치 |
justify-content / align-content | 전체 그리드 정렬 |