# PivotPanel 사용자 정의 레이아웃 

## Content

##  그리드 레이아웃을 사용하는 PivotPanel 

**PivotPanel** 컨트롤의 기본 레이아웃은 필드 섹션이 영역 섹션 위에 표시되는 방식입니다. 이 기본 레이아웃은 Excel에서도 사용됩니다.

아래 예제는 **PivotPanel**의 기본 **controlTemplate**을 CSS 그리드 기반 레이아웃으로 대체한 것입니다. 이를 통해 몇 가지 CSS 규칙만 조정하여 원하는 거의 모든 레이아웃을 구현할 수 있습니다.

## 누적형 (기본) 레이아웃

![stacked-layout](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4153b498-0e9e-452c-b1b8-6a8130043972/stacked-layout.dc952e.png?width=400)

## 나란히 표시

![side-by-side-layout](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4153b498-0e9e-452c-b1b8-6a8130043972/side-by-side-layout.b3a6dc.png?width=500)

## 사용자 정의 레이아웃

![custom-layout](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4153b498-0e9e-452c-b1b8-6a8130043972/custom-layout.c80b02.png?width=400)

## 필드만 표시

![fields-only-layout](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4153b498-0e9e-452c-b1b8-6a8130043972/fields-only-layout.11706c.png?width=400)

## 영역만 표시 (2 x 2)

![areas-only-layout-2x2](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4153b498-0e9e-452c-b1b8-6a8130043972/areas-only-layout-2x2.b85564.png?width=400)

## 영역만 표시 (1 x 4)

![areas-only-layout-1x4](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4153b498-0e9e-452c-b1b8-6a8130043972/areas-only-layout-1x4.c79bcc.png?width=400)
각 템플릿을 보기 위해서는 [피벗 패널 사용자 정의 레이아웃 데모](https://demo.mescius.co.kr/wijmo/learn-wijmo/OLAP/PivotPanel/Customlayouts/ControlTemplate/purejs)를 참고하여 주시기 바랍니다.