> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/css-2/undefined/undefined-13/undefined-1.md).

# 그리드 컨테이너

## 그리드 설정 - Grid 컨테이너

### **display**

* 그리드 컨테이너 요소를 설정하고 그리드 포멧팅 컨텍스트(격자무늬) 영역을 생성한다.
* flex와 마찬가지로 `display: grid;`를 적용하는 것이 그리드의 시작이다.
* `display: grid;`만 입력했을 때 아무런 변화도 일어나지 않는다.
  * `<grid>` :

    `<inline-grid>` : block과 inline-block을 생각해보면 이해가 쉽다. inline-block 처럼 적용된다. &#x20;

    `<subgrid>` (Level2에서 지원 예정)

    ```css
    .grid-container {
    display: grid; /* display: inline-grid; */
    }
    ```
* `<float>` `<clear>` `<column>` `<vertical-align>` 속성은 그리드 컨테이너 요소에 적용되지 않는다.

### **grid-template-rows/ grid-template-columns (명시적)**

* 공백으로 구분된 값 리스트를 해석하여 그리드 행, 열을 설정합니다. 각 값은 트랙의 크기를 말합니다.
* 컨테이너의 그리드 트랙의 크기를 지정해 준다.
* 행과 열에 입력하는 크기에 갯수에 맞춰 행과 열이 생성된다.
* 단위 : px, rem, em, %, fr 등
  * auto : 자동 설정 (브라우저 크기에 따라 자동으로 변경됨.)
* rows, columns 타이핑할 때 s 오타 조심하기!!!!!
* 예를들어 2행 4열의 그리드를 만들었을 때 아이템의 갯수가 6개라면 나머지 두 셀은 공백으로 남겨진다.

```css
.grid {
  display: grid;
  grid-template-rows: 20% 100px auto;      /* 3행 */
  grid-template-columns: 40px 100px;       /* 2열 */
  /* grid-template-columns: 80px auto */
  /* grid-template-columns: repeat(5, 1fr); */
  /* grid-template-columns: 150px 1.5fr 2fr */

/* 속기형 */
/* grid-template: row values / column values; */
  grid-template: repeat(5, 20px) / repeat(3, 1fr)
}
```

### **grid-row-gap grid-column-gap grid-gap**

```css
.grid {
  display: grid;
  grid-row-gap: 20px;
  grid-column-gap: 10px;

  /* 속기형 : row column */
  grid-gap: 10px; /* 행과 열에 동일한 값 적용 */
  grid-gap: 10px 20px;
}
```

### **fr(Fraction) 단위**

* 컨테이너 전체 크기에서 숫자의 비율대로 트랙을 나눈다

```css
.grid {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1fr; /* 트랙을 2:1.3:1의 비율로 나눈다. */
}
```

### **repeat() 함수**

* 반복되는 값을 자동으로 처리할 수 있는 함수이다.
* repeat(반복횟수, 반복하는 값)
  * 반복횟수 : 양수만 가능, 1이상 / 반복하는 값 : 그리드 트랙 리스트(배열)

```css
.grid {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  /* grid-template-rows: repeat(2, 1fr 2fr); 
    grid-template-columns: 1fr 2fr 1fr 2fr; */
}
```

### **minmax() 함수**

* 최소값과 최대값을 지정할 수 있는 함수이다.
* repeat() 함수 내부, 외부에서 사용할 수 있다.
* minmax(최소값, 최대값)
  * 부모 컨테이너의 크기가 최소값 미만으로 작아지지 않도록, 최대값 초과로 늘어나지 않도록 설정한다.

```css
.grid {
  display: grid;

  /* 1, 2행 : 최소값 20px을 가지며 셀 안의 내용이 많아질 수록 트랙의 높이값이 자동으로 늘어난다 */
  grid-template-rows: repeat(2, minmax(20px, auto));
  /* grid-template-rows: repeat(2, minmax(20px, 1fr)); */

  /* 1열 : 최소값 30px을 가지며 셀 안의 내용이 많아질 수록 트랙의 너비의 값이 자동으로 늘어난다.
       2, 3열 : 1열의 너비를 제외한 나머지 공백의 공간을 1:1의 비율만큼 나눠가진다. */
  grid-template-columns: minmax(30px, auto) repeat(2, 1fr);
}
```

### **grid-auto-rows grid-auto-columns (암시적 implict)**

암시적인 그리드 트랙이란?

* 사용자가 설정하지 않은 임의의 트랙으로, 사용자가 명시적으로 `grid-template-rows` / `grid-template-columns` 속성을 설정하지 않은 나머지 그리드 트랙을 가리킨다.
* 즉, 아이템 박스는 생성되어 있으나 `grid-template-rows` / `grid-template-columns` 속성이 설정되어 있지 않은 트랙을 말한다.
* 단위 : px, rem, em, %, fr 등
* **속기형 없음**
* grid-auto-columns : <https://developer.mozilla.org/ko/docs/Web/CSS/grid-auto-columns> &#x20;

  grid-auto-rows : <https://developer.mozilla.org/ko/docs/Web/CSS/grid-auto-rows>

```css
.grid {
  display: grid;

  grid-auto-rows: minmax(100px, auto);

  /* min-content : 컨텐트의 개수 만큼 공간박스 설정 */
  grid-auto-columns: min-content;
}
```

### **grid-auto-flow**

* 아이템이 자동 배치되는 흐름을 결정하는 속성입니다.
  * row (기본값) : 각 행을 차례로 채우고 필요에 따라 새 행을 추가하는 자동 배치 알고리즘
  * column : 각 열을 차례로 채우고 필요에 따라 새 열을 추가하는 자동 배치 알고리즘
  * dense
    * 배치 중 나중에 크기가 작은 아이템이 존재할 경우, 그리드 영역 앞부분의 남은 공간에 자동 배치하는 알고리즘
    * row와 column에 따라 기준이 달라진다.
  * row dense
  * column dense

```markup
<section class="grid-contianer">
  <div class="item-a">item-a</div>
  <div class="item-b">item-a</div>
  <div class="item-c">item-a</div>
  <div class="item-d">item-a</div>
  <div class="item-e">item-a</div>
</section>
```

```css
.grid-contianer {
  display: grid;
  grid-template: repeat(5, 60px) / repeat(2, 30px);
  grid-auto-flow: row;
}

.item-a {
  grid-row: 1 / 3;
  grid-column: 1;
}

.item-e {
  grid-row: 1 / 3;
  grid-column: 5;
}
```

### **justify-items align-items 아이템 내부 콘텐츠 가로/세로 정렬**

* `justify-items` : 행(row) 축을 따라 그리드 아이템 내부 콘텐츠를 정열한다.
* `align-items` : 열(column) 축을 따라 그리드 아이템 내부 콘텐츠를 정렬한다.
* 이 설정은 그리드 컨테이너 내부 모든 그리드 아이템에 적용된다.
* 값
  * stretch(기본값) : 그리드 영역 전체 너비를 채움
  * start : 그리드 영역의 시작점에 콘텐츠 정렬
  * center : 그리드 영역의 끝점에 콘텐츠 정렬
  * end : 그리드 영역 중앙에 콘텐츠 정렬

### **justify-content align-content : 아이템 트랙 가로/세로 정렬**

* `justify-content` : 행(row) 축을 따라 아이템 트랙을 정렬한다.
* `align-content` : 열(column) 축을 따라 아이템 트랙을 정렬한다.
* 그리드 아이템들의 너비의 총 합이 그리드 컨테이너의 크기보다 작아야 한다.
* 그리드 아이템들에 설정되어 있는 너비값의 단위가 같아야 한다. (px 등)
* 값
* stretch : 그리드 컨테이너 영역을 아이템 트랙 크기를 조정하여 채움
* start : 그리드 컨테이너 영역의 시작점에 아이템 트랙을 정렬
* center : 중앙에 아이템 트랙을 정렬
* end : 끝점에 아이템 트랙을 정렬
* space-around : 그리드 컨테이너의 남은 영역을 아이템 트랙(행)이 좌/우 공간으로 나눔 (양 가장자리 공간은 아이템 그룹 사이 간격의 1/2)
* space-between : 그리드 컨테이너 영역의 양 가장자리 공백 없이, 아이템 트랙(행) 사이 공간을 나눔
* space-evenly : `space-around`와 비슷해보이지만, 공간을 모두 동일하게 나누는 점이 다름

```css
.grid {
  display: grid;

  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}
```

### place-items/ place-self 속기형&#x20;

* place-items 속성은 align-items 과 justify-items의 속기형이다. &#x20;
* place-self 속성은 align-self와  justify-self의 속기형이다.