> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/css-grid/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/css-grid/css-grid-layout-usage-guide/symmetrical-grid-layout/gallery-grid.md).

# Gallery Grid

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHLU5xfyoU90qw3o4Gs%2F-LHLWfdgvjHCkIEv5V5h%2Fimage.png?alt=media\&token=cf4f0d48-0e01-4365-8cf7-60ecf31b10fe)

{% embed url="<https://www.chanel.com/us/fashion/knitwear/l/1x3x13/the-looks>" %}
갤러리 레이아웃 디자인 | CHANEL
{% endembed %}

## 갤러리 그리드 레이아웃 <a href="#layout" id="layout"></a>

일관되게 반복되는 규칙의 그리드를 정의해 거터를 가지는 6컬럼 갤러리 레이아웃을 구현할 수 있습니다.

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHLU5xfyoU90qw3o4Gs%2F-LHLXeXePcPaprBjY1vv%2Fimage.png?alt=media\&token=69882455-c925-41e0-9261-8b8c5f02b892)

### 열 너비 / 거터 계산 <a href="#calc-columns-gutters" id="calc-columns-gutters"></a>

일정한 열 너비 및 간격을 유지하는 갤러리 레이아웃으로 계산이 손쉽습니다. CSS Grid는 분수(fraction)을 사용할 수 있어 보다 간단하게 구현할 수 있습니다.

> 레이아웃 총 너비  = 1242px\
> 거터 간격             = 30px

![일정한 간격의 열 너비와 거터](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHMoHCodndi2a_0GD8m%2F-LHMt8QoyV4Vecys6upF%2Fimage.png?alt=media\&token=ce17b728-3264-4a7c-b7b8-ccfb6d1b4f73)

갤러리 컨테이너의 너비에서 거터 값 (`30px`) 만 뺀 나머지를 일정하게 6등분 하기에 [`repeat()`](/css-grid/css-grid-guide/repea-function.md) 함수를 사용해 코드를 작성합니다. 컬럼의 너비는 `grid-template-columns` 속성을 거터는 `grid-column-gap` 속성을 사용합니다.

```css
grid-template-columns: repeat(6, 1fr); 
grid-column-gap: 30px;
```

### 행 높이 / 거터 계산 <a href="#calc-rows" id="calc-rows"></a>

`grid-template-rows` 속성을 사용해 행 높이를 계산하여 반복되는 부분은 `repeat()` 함수를 사용하여 설정합니다. 행 사이 간격은 `grid-row-gap` 속성을 사용합니다.

```css
grid-template-rows: 108px repeat(3, 288p);
grid-row-gap: 36px;
```

![일정한 패턴을 보이는 갤러리의 행 높이](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHMoHCodndi2a_0GD8m%2F-LHN-4lA_iTaTtEzUATw%2Fimage.png?alt=media\&token=9b113d8d-b5e9-4755-9406-97042195dd70)

### 그리드 정의 <a href="#define-grid" id="define-grid"></a>

계산된 행/열 설정을 토대로 그리드를 정의하는 코드를 다음과 같이 작성합니다.

```css
.chanel-galley {
  display: grid;
  max-width: 1242px;
  grid-template-columns: repeat(6, 1fr); 
  grid-template-rows: 108px repeat(3, 288px 36px) 288px;
  grid-gap: 36px 30px;
}
```