1.Grid container속성-row gap, column gap, gap-
1. row gap
각 행과 행 사이의 간격(gutter)을 지정한다. 더 정확하게 그리드 선의 크기를 설정한다 표현할 수 있다.
💡사용법
.container{
row-gap: 크기;
}2. column gap
각 열과 열 사이의 간격(gutter)을 지정한다.
💡사용법
.container{
column-gap: 크기;
}3. gap
row gap, column gap을 아우르는 단축속성
💡사용법
.container{
gap: row크기 column크기;
}2.Grid container속성-grid auto rows,grid auto columns-
💡여기서 암시적이라는 개념은 중요하다.
한마디로 예를 들어서 2X2짜리 표에서 3X1에 암시적으로 크기를 설정해 두는 것을 의미한다.
1. grid auto rows
임시적 행(track)의 크기를 정의합니다.
아이템이 grid-template-row로 정의한 명시적 행 외부에 배치되는 경우 암시적 행의 크기가 적용된다.
2. grid auto columns
임시적 열의 크기를 정의합니다.
아이템이 grid-template-row로 정의한 명시적 열 외부에 배치되는 경우 암시적 열의 크기가 적용된다.
💡암시적 크기가 적용된 행과 열은 양수 라인 번호만 사용할 수 있다.(음수 사용 불가)
3.Grid container속성-grid auto flow
배치하지 않은 아이템을 어떤 방식의 '자동 배치 알고리즘'으로 처리할지 정의한다.
💡배치한 아이템은 grid-area(이하 개별 속성 포함)를 사용한 아이템을 의미한다.
| 값 | 의미 | 기본값 |
|---|---|---|
| row | 각 행(수평축) 축을 따라 차례로 배치 | row |
| column | 각 열(수직축) 축을 따라 차례로 배치 | |
| row dense(dense) | 각 행 축을 따라 차례로 배치, 빈 영역을 메움 | |
| column dense | 각 열 축을 따라 차례로 배치, 빈 영역을 메움 |
💡rowdens와 row의 차이
1. grid-auto-flow:row;의 경우 박스의 크기에 따라 줄맞춤하여 위에서부터 아래로 지그재그로 쌓이는 형식이다.
2.grid-auto-flow:rowdense;라고 한다면 만약 2번박스가 커서 두번째 줄에 간다면 3번과 4번박스는 위에 빈 공간을 채우는 개념이다. grid-auto-flow:row의 경우 지그재그임으로 빈공간을 채우지는 않는다.
3.grid-auto-column과 columndense도 위와 같다.
4.Grid container속성-grid template rows, grid template columns-
1.grid-template-rows
명시적 행의 크기를 정의한다.
동시에 라인의 이름도 정의할 수 있다.
2. fr()단위를 사용할 수 있다.
3. repeat()함수를 사용할 수 있다.
💡사용법
사용법은 grid-template-columns와 같다.
라인의 이름을 정의할 때 중복으로 쓸 수 있으며 [선이름1 선이름1*]인 띄어쓰기로 입력할 수 있다.
2.grid-template-columns
명시적 열의 크기를 정의한다.
동시에 라인의 이름도 정의할 수 있다.
2. fr()단위를 사용할 수 있다.
3. repeat()함수를 사용할 수 있다.
💡사용법
사용법은 grid-template-rows와 같다.
5.Grid container속성- grid row, grid column, grid area-
1. grid row
grid-row-start, grid-row-end의 단축속성이다.
각 속성을 '/'로 구분하는 것에 주의해야 한다.
2.grid column
위와 같다.
3. grid-area
- grid-row-start(or end), grid-column-start(or end)의 단축속성이다.
- grid-template-areas와 같이 참조할 영역이름을 설정할 수 도 있다.
💡사용법
.item{
grid-area:<grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>
grid-area:영역이름;
}
6.Grid container속성-grid template-
grid-template-rows, grid-template-columns, grid-template-areas의 단축속성이다.
💡사용법
1.
.container{
grid-template:<grid-template-rows> / <grid-template-columns>;
grid-template:<grid-template-areas>;
}2.
.container{
grid-template:
[1행시작선이름]"areas"행너비[1행끝선이름]
[2행시작선이름]"areas"행너비[2행끝선이름]
/ <grid-template-columns>;
}7.Grid container속성-grid-
grid-template-rows, grid-template-columns, grid-auto-rows, grid-auto-columns의 단축속성이다.
💡사용법
.container{
grid:<grid-template>;
grid:<grid-temaplate-rows> / <grid-auto-flow> <grid-auto-columns>;
grid:<grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;
}8.Grid container속성-align content, justify content-
1. align-content
그리드 콘테츠를 수직(열 축)정렬한다.
그리드 콘텐츠의 세로 너비가 그리드 컨테이너보다 작아야한다.
| 값 | 의미 | 기본값 |
|---|---|---|
| normal | stretch와 같다 | normal |
| start | 시작점(위쪽)정렬 | |
| center | 수직 가운데 정렬 | |
| end | 끝점(아래쪽)정렬 | |
| space-around | 각 행 위아래에 여백을 고르게 정렬 | |
| space-between | 첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백에 고르게 정렬 | |
| space-evenly | 모든 여백을 고르게 정렬 | |
| stretch | 열 축을 채우기 위해 그리드 콘텐츠를 늘림 |
2. justify-content
그리드 콘텐츠를 수평(행축)정렬한다.
그리드 콘텐츠의 가로 너비가 그리드 컨테이너보다 작아야 한다.
| 값 | 의미 | 기본값 |
|---|---|---|
| normal | stretch값과 같다 | normal |
| start | 시작점(왼쪽)정렬 | |
| center | 수평 가운데 정렬 | |
| end | 끝점(오른쪽)정렬 | |
| space-around | 각 열 좌우에 여백을 고르게 정렬 | |
| space-between | 첫 열을 시작점에, 끝 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬 | |
| space-evenly | 모든 여백을 고르게 정렬 | |
| stretch | 행 축을 채우기 위해 그리드 콘텐츠를 늘림 |
9.Grid container속성-align items, justify items-
1. align-items
그리드 아이템들을 수직(열축)정렬한다.
그리드 아이템 세로 너비가 자신이 속한 그리드 행의 크기보다 작아야 한다.
| 값 | 의미 | 기본값 |
|---|---|---|
| normal | stretch와 같다 | normal |
| start | 시작점(위쪽) 정렬 | |
| center | 수직 가운데 정렬 | |
| end | 끝점(아래쪽)정렬 | |
| stretch | 열 축을 채우기 위해 그리드 아이템을 늘림 |
2. justify-items
그리드 아이템들을 수평(행 축)정렬한다.
그리드 아이템의 가로 너비가 자신이 속한 그리드 열의 크기보다 작아야 한다.
| 값 | 의미 | 기본값 |
|---|---|---|
| normal | stretch와 같다 | normal |
| start | 시작점(왼쪽) 정렬 | |
| center | 수평 가운데 정렬 | |
| end | 끝점(오른쪽)정렬 | |
| stretch | 행 축을 채우기 위해 그리드 아이템을 늘림 |
10.Grid container속성-align self, justify self-
1. align-self
단일 그리드 아이템을 수직(열 축)정렬한다.
그리드 아이템의 세로 너비가 자신이 속한 그리드 행의 크기보다 작아야 한다.
| 값 | 의미 | 기본값 |
|---|---|---|
| normal | stretch와 같다 | normal |
| start | 시작점(위쪽)정렬 | |
| center | 수직 가운데 정렬 | |
| end | 끝점(아래쪽)정렬 | |
| stretch | 열 축을 채우기 위해 그리드 아이템을 늘림 |
2. justify-self
단일 그리드 아이템을 수평(행 축)정렬한다.
그리드 아이템의 가로 너비가 자신이 속한 그리드 열의 크기보다 작아야 한다.
| 값 | 의미 | 기본값 |
|---|---|---|
| normal | stretch와 같다 | normal |
| start | 시작점(왼쪽)정렬 | |
| center | 수평 가운데 정렬 | |
| end | 끝점(오른쪽)정렬 | |
| stretch | 행 축을 채우기 위해 그리드 아이템을 늘림 |
11.Grid container속성-order, z-index-
1.order
그리드 아이템이 자동 배치되는 순서를 변경할 수 있다.
숫자가 적을수록 앞서 배치된다.
💡사용법에 대한 예시
.container{
display:grid;
grid-template-rows:repeat(2, 1fr);
grid-template-columns:repeat(2, 1fr);
}
.item:nth-child(1){order:1;}
.item:nth-child(2){order:5;}
.item:nth-child(3){order:-1;}2. z-index
z-index속성을 이용해 아이템이 쌓이는 순서를 변경할 수 있다.
💡사용법에 대한 예시
.item:nth-child(1){
grid-area: 1 / 1 / 2 / 3;
}
.item:nth-child(2){
grid-area: 1 / 2 / 3 / 3;
z-index:1;
}
.item:nth-child(3){
grid-area: 2 / 2 / 3 / 4;
}위 예시를 실행시켜보면 z-index로 인해서 nth-child(2)가 제일 위에 쌓인 것을 알 수 있다.
z-index는 position과 grid에서 쓸 수있다.
