@panoramax/web-viewer/docs/reference/components/layout/CorneredGrid.md

Panoramax web viewer for geolocated pictures

<a name="Panoramax.components.layout.CorneredGrid"></a>

## Panoramax.components.layout.CorneredGrid ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
**Kind**: static class of <code>Panoramax.components.layout</code>  
**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
**Element**: pnx-cornered-grid  
**Slot**: `bg` The full size background component  
**Slot**: `top-left` The top-left corner  
**Slot**: `top` The top middle corner  
**Slot**: `top-right` The top-right corner  
**Slot**: `bottom-left` The bottom-left corner  
**Slot**: `bottom` The bottom middle corner  
**Slot**: `bottom-right` The bottom-right corner  
<a name="new_Panoramax.components.layout.CorneredGrid_new"></a>

### new CorneredGrid()
CorneredGrid layout offers a convenient way to display overlay widgets on top of a background component.
This is useful for showing buttons in corners over a map or picture display.
Grid layout is organised through many slots (background and corners) : two rows (top, bottom) and three columns (right, middle, left).

**Example**  
```html
<pnx-cornered-grid>
  <pnx-map slot="bg" />
  <pnx-button slot="top-left" />
  <pnx-button slot="top-left" />
  <pnx-legend slot="bottom" />
</pnx-cornered-grid>
```