CSS #15 -Grid2-

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

1. grid-row-start(or end), grid-column-start(or end)의 단축속성이다.
2. 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에서 쓸 수있다.