# Custom Layouts in PivotPanel

Learn how to create custom layouts in Wijmo's OLAP PivotPanel in this tutorial

## Content

## PivotPanel with a CSS Grid Layout

The **PivotPanel** control has a layout that shows the *Fields* section above the *Areas* section. This is the default layout used by Excel as well.

The examples below replaces the **PivotPanel**'s default **controlTemplate** with one that uses a CSS Grid-based layout. This allows you to achieve virtually any layout you want simply by adjusting a few CSS rules.

## Stacked (default) Layout

![stacked-layout](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/stacked-layout.50adb2.png)

## Side by Side

![side-by-side-layout](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/side-by-side-layout.204c6d.png)

## Custom Layout

![custom-layout](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/custom-layout.9d72fe.png)

## Fields Only

![fields-only-layout](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/fields-only-layout.370233.png)

## Areas Only (2 x 2)

![areas-only-layout-2x2](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/areas-only-layout-2x2.323700.png)

## Areas Only (1 x 4)

![areas-only-layout-1x4](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/areas-only-layout-1x4.fec500.png)

To view to the template of each, refer to [Pivot Panel Layout](/wijmo/demos/OLAP/PivotPanel/Customlayouts/ControlTemplate/purejs) demo.