196 lines
4.8 KiB
Markdown
196 lines
4.8 KiB
Markdown
# CSS Grid
|
|
CSS Grid는 웹 페이지 레이아웃을 만들기 위한 강력한 2D(행+열) 레이아웃 시스템이야.
|
|
> Flexbox가 1차원(가로 또는 세로) 정렬을 위한 도구라면, Grid는 2차원(가로+세로) 정렬을 위한 도구
|
|
|
|
| 컨테이너 속성 | 설명 | 옵션 |
|
|
|---|---|---|
|
|
| grid-template-columns | 열 개수 및 크기 설정 |
|
|
| grid-template-rows | 행 개수 및 크기 설정 |
|
|
| grid-gap | 그리드 간격 설정 | = row-gap + column-gap = gap |
|
|
| grid-auto-rows | 자동 크기 설정 |
|
|
| grid-auto-columns | 자동 크기 설정 |
|
|
| grid-auto-flow | 아이템 자동 배치 방향 |
|
|
| grid-template-areas | 그리드 레이아웃을 시각적으로 구성 |
|
|
| align-items | |
|
|
| justify-content | |
|
|
|
|
| 아이템 속성 | 설명 | 옵션 |
|
|
|---|---|---|
|
|
| grid-column | 열 영역 지정 | = grid-column-start + grid-column-end |
|
|
| grid-row | 행 영역 지정 | = grid-row-start + grid-row-end |
|
|
| grid-area | 그리드 영역 지정 |
|
|
| align-self | |
|
|
|
|
|
|
## CSS Grid 개념 및 기본 구조
|
|
CSS Grid는 grid container(부모)와 grid items(자식)으로 구성됨.
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
} /* 이렇게 하면 .container 안의 모든 요소(grid items)가 그리드 아이템으로 변함! */
|
|
```
|
|
|
|
## Grid 컨테이너 속성
|
|
Grid 레이아웃을 설정하는 부모 요소의 속성들
|
|
|
|
### grid-template-columns
|
|
그리드의 열(가로) 개수와 크기를 정의!
|
|
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: 200px 200px 200px;
|
|
} /* 200px 크기의 열이 3개 생성됨! */
|
|
```
|
|
#### 반응형으로 자동 크기 조정
|
|
fr 단위 사용
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
} /* 각 열이 동일한 너비(1fr = 1 fraction)로 자동 조정됨! */
|
|
```
|
|
|
|
### grid-template-rows
|
|
그리드의 행(세로) 크기를 정의!
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
grid-template-rows: 60px 1fr;
|
|
}
|
|
```
|
|
|
|
### grid-gap = gap = row-gap + column-gap
|
|
그리드 아이템 간의 간격을 조절!
|
|
|
|
* row-gap : 행 간격
|
|
* column-gap : 열 간격
|
|
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-gap: 10px; /* 모든 열과 행 사이에 10px 간격 추가! */
|
|
}
|
|
```
|
|
|
|
### grid-auto-rows / grid-auto-columns
|
|
명시되지 않은 행 또는 열의 크기를 설정
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: 200px 200px;
|
|
grid-auto-rows: 150px;
|
|
} /* 설정된 열 개수보다 많은 아이템이 추가되면, 자동으로 150px 높이의 행이 생성됨! */
|
|
```
|
|
|
|
### grid-auto-flow
|
|
그리드 아이템을 자동으로 배치하는 방향을 결정
|
|
* row : 행 기준 자동 배치 (기본값)
|
|
* column : 열 기준 자동 배치
|
|
* dense : 빈 공간을 채우도록 자동 배치
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
} /* 아이템이 행이 아니라 열 방향으로 자동 배치됨! */
|
|
```
|
|
|
|
### grid-template-areas
|
|
그리드 컨테이너에서 영역을 이름으로 정의하고, 자식 요소를 해당 영역에 배치할 수 있음!
|
|
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: 200px 1fr;
|
|
grid-template-rows: 50px 1fr 50px;
|
|
grid-template-areas:
|
|
"header header"
|
|
"sidebar content"
|
|
"footer footer";
|
|
}
|
|
.header {
|
|
grid-area: header;
|
|
}
|
|
.sidebar {
|
|
grid-area: sidebar;
|
|
}
|
|
.content {
|
|
grid-area: content;
|
|
}
|
|
.footer {
|
|
grid-area: footer;
|
|
}
|
|
```
|
|
|
|
## Grid 아이템 속성
|
|
각 개별 아이템에 적용하는 속성들!
|
|
|
|
### grid-column
|
|
아이템이 차지할 열(column)의 시작과 끝을 지정
|
|
```css
|
|
.item {
|
|
grid-column: 1 / 3; /* 1번째 열에서 시작해서 3번째 열까지 차지 */
|
|
}
|
|
```
|
|
#### 줄여서 작성 가능
|
|
```css
|
|
grid-column: span 2; /* 현재 위치에서 2칸 차지! */
|
|
```
|
|
### grid-row
|
|
아이템이 차지할 행(row)의 시작과 끝을 지정
|
|
```css
|
|
.item {
|
|
grid-row: 2 / 4; /* 2번째 행에서 시작해서 4번째 행까지 차지 */
|
|
}
|
|
```
|
|
### grid-area
|
|
한 번에 행과 열을 설정할 수 있음! `grid-template-areas`에서 사용될 이름을 지정
|
|
```css
|
|
.item {
|
|
grid-area: 2 / 1 / 4 / 3; /* row-start / column-start / row-end / column-end */
|
|
}
|
|
```
|
|
```css
|
|
.header {
|
|
grid-area: header;
|
|
}
|
|
```
|
|
|
|
### repeat(), minmax(), auto-fit, auto-fill
|
|
복잡한 그리드 설정을 더 쉽게 만드는 기능들!
|
|
#### repeat(n, 크기)
|
|
반복 그리드 생성
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
} /* 1fr 크기의 열을 3개 자동 생성! */
|
|
```
|
|
#### minmax(최소, 최대)
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(100px, 1fr));
|
|
} /* 열 크기가 최소 100px, 최대 1fr로 자동 조정됨! */
|
|
```
|
|
#### auto-fill
|
|
그리드 크기에 맞춰 최대한 많은 열 생성
|
|
|
|
#### auto-fit
|
|
아이템이 존재하는 열만 생성, 빈 공간 제거
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
}
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|