CSS Grid

Grid Container Properties

display : 그리드 컨테이너(Container)를 정의
- grid : Block 특성의 Grid Container를 정의
- inline-grid : Inline 특성의 Grid Container를 정의

grid-template-rows : 명시적 행(Track)의 크기를 정의

1행크기 2행크기 ...;
[선이름] 1행크기 [선이름] 2행크기 [선이름] ...;
repeat(행크기 반복수, 행크기);

grid-template-columns : 명시적 열(Track)의 크기를 정의

1행크기 2행크기 ...;
[선이름] 1행크기 [선이름] 2행크기 [선이름] ...;
repeat(행크기 반복수, 행크기);

grid-template-areas : 영역(Area) 이름을 참조해 템플릿 생성

.container {
  "header header header"
  "main main aside"
  "main main ."
  "footer footer footer"
}
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

grid-template : grid-template-xxx의 단축 속성

.container {
  grid-template:
    [1행시작선이름] "AREAS" 행너비 [1행끝선이름]
    [2행시작선이름] "AREAS" 행너비 [2행끝선이름]
    / <grid-template-columns>;
}

.container {
  display: grid;
  grid-template:
    "header header header" 80px
    "main main aside" 350px
    "footer footer footer" 130px
    / 2fr 100px 1fr;
}
header { grid-area: header; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

row-gap : 행과 행 사이의 간격(Line)을 정의
column-gap : 열과 열 사이의 간격(Line)을 정의
gap :
```
gap: <grid-row-gap> <grid-column-gap>;
```
grid-auto-rows : 암시적인 행(Track)의 크기를 정의
```
grid-auto-rows: 100px;
```
grid-auto-columns : 암시적인 열(Track)의 크기를 정의
```
grid-auto-columns: 100px;
```
grid-auto-flow : 자동 배치 알고리즘 방식을 정의
- row : 각 행 축을 따라 차례로 배치 (기본값)
- column : 각 열 축을 따라 차례로 배치
- row dense(dense) : 각 행 축을 따라 차례로 배치, 빈 영역 메움!
- column dense : 각 열 축을 따라 차례로 배치, 빈 영역 메움!

grid : grid-template-xxx과 grid-auto-xxx의 단축 속성

grid: <grid-template>;
grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;

align-content 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
- normal : stretch와 같습니다. (기본값)
- start : 시작점(위쪽) 정렬
- center : 수직 가운데 정렬
- end : 끝점(아래쪽) 정렬
- space-around : 각 행 위아래에 여백을 고르게 정렬
- space-between : 첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
- space-evenly : 모든 여백을 고르게 정렬
- stretch : 열 축을 채우기 위해 그리드 콘텐츠를 늘림
justify-content 그리드 콘텐츠를 수평(행 축) 정렬
- normal : stretch와 같습니다. (기본값)
- start : 시작점(왼쪽) 정렬
- center : 수평 가운데 정렬
- end : 끝점(오른쪽) 정렬
- space-around : 각 열 좌우에 여백을 고르게 정렬
- space-between : 첫 열은 시작점에, 끝 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
- space-evenly : 모든 여백을 고르게 정렬
- stretch : 행 축을 채우기 위해 그리드 콘텐츠를 늘림
place-content : align-content와 justify-content의 단축 속성
```
place-content: <align-content> <justify-content>;
```
align-items : 그리드 아이템(Items)들을 수직(열 축) 정렬
- normal : stretch와 같습니다. (기본값)
- start : 시작점(위쪽) 정렬
- center : 수직 가운데 정렬
- end : 끝점(아래쪽) 정렬
- stretch : 열 축을 채우기 위해 그리드 아이템을 늘림
justify-items : 그리드 아이템들을 수평(행 축) 정렬
- normal - stretch와 같습니다. (기본값)
- start - 시작점(왼쪽) 정렬
- center - 수평 가운데 정렬
- end - 끝점(오른쪽) 정렬
- stretch - 행 축을 채우기 위해 그리드 아이템을 늘림
place-items : align-items와 justify-items의 단축 속성
```
place-items: <align-items> <justify-items>;
```

Grid Item Properties

.item:nth-child(1) {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 4;
}

.item:nth-child(1) {
  grid-row-start: row-2nd;
  grid-row-end: row-3rd;
  grid-column-start: col-2nd;
  grid-column-end: col-4th;
}

.item:nth-child(1) {
  grid-row-start: 1;
  grid-row-end: span 2;

  grid-column-start: 2;
  /* grid-column-end: span 1; (생략) */
}

.item:nth-child(1) {
  /* grid-row-start: span 1; (생략) */
  grid-row-end: 3;

  grid-column-start: span 2;
  grid-column-end: 4;
}

grid-row-start : 그리드 아이템(Item)의 행 시작 위치 지정
grid-row-end : 그리드 아이템의 행 끝 위치 지정
grid-row : grid-row-xxx의 단축 속성(행 시작/끝 위치)
```
<grid-row-start> / <grid-row-end>;
```
grid-column-start : 그리드 아이템의 열 시작 위치 지정
grid-column-end : 그리드 아이템의 열 끝 위치 지정
grid-column : grid-column-xxx의 단축 속성(열 시작/끝 위치)
```
grid-column: <grid-column-start> / <grid-column-end>;
```

grid-area : 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성

grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
grid-area: 영역이름;

align-self : 단일 그리드 아이템을 수직(열 축) 정렬
- normal : stretch와 같습니다. (기본값)
- start : 시작점(위쪽) 정렬
- center : 수직 가운데 정렬
- end : 끝점(아래쪽) 정렬
- stretch : 열 축을 채우기 위해 그리드 아이템을 늘림
justify-self : 단일 그리드 아이템을 수평(행 축) 정렬
- normal : stretch와 같습니다. (기본값)
- start : 시작점(왼쪽) 정렬
- center : 수평 가운데 정렬
- end : 끝점(오른쪽) 정렬
- stretch : 행 축을 채우기 위해 그리드 아이템을 늘림
place-self : align-self와 justify-self의 단축 속성
```
place-self: <align-self> <justify-self>;
```
order : 그리드 아이템의 배치 순서를 지정, 숫자가 작을수록 앞
z-index : 그리드 아이템의 쌓이는 순서를 지정

Grid Function

repeat(반복횟수, 내용)

.container {
  grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px;
}
.container {
  grid-template-columns: repeat(9, 100px);
}

minmax(최소, 최대)

grid-template-columns: minmax(100px, 1fr) minmax(200px, 1fr);

fit-content(최대 크기)

grid-template-columns: fit-content(300px) fit-content(300px);

auto-fill : 남는 공간 유지

grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

auto-fit : 남는 공간 축소

grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

Units

fr
min-content : 내용 최소 크기
- word-break: keep-all (한글 사용 때)
max-content : 내용 최대 크기

https://css-tricks.com/snippets/css/complete-guide-grid/

Grid Container Properties​

Grid Item Properties​

Grid Function​

Units​

Grid Container Properties

Grid Item Properties

Grid Function

Units