# Hotspot Grid
GRAVITY supports a so called **Hotspot Grid**. There are pages with dynamic content, or pages where GRAVITY is just not allowed to access (in other terms, we can not access the DOM tree). For these cases now comes the grid, placing an overlay over the website, allowing Authors to place content relative to the grid. The grid is most commonly defined as table (but can vary) and is defined in the relative GRAVITY Admin Site ([[Admin Site]]).
> [!Info]-
> A site can either support the hotspot grid or the normal mode, but not both. The grid is also not going to scroll with the page, it is always 100% the size of the window and stays in front of any content you see.
| Grid On | Grid Off |
| ---- | ---- |
| ![[hotspot_grid_on.png]] | ![[hotspot_grid_off.png]] |
The left image shows Microsoft Word Online with the Hotspot Grid turned on. As soon as the grid is turned on and edit mode is enabled, all native page content becomes inaccessible and the Grid containers are the only selectable elements.
# Detail
Instead of using native page elements (so called DOM elements) we use artificial elements to bind content to. We create the artificial containers in the backend, overlaying them in the actual site as soon as gravity is enabled. The user (except Authors) will never actually "see" the grid, they may see that hotspots are not 100% accurately bound to a specific element, but the "grid" itself as grid will never be visible.
## Mode comparison
| |Grid mode|DOM mode (traditional)|
|---|---|---|
|Strengths|Grid was developed for any case where DOM is inaccessible (known cases are e.g. Office Online Applications or any other iFrame case)<br><br>Use it when the only element you could bind to is your whole screen. |Especially useful if DOM content does rarely or never change and all DOM content is accessible|
|Weakness'|It is not fully zoom and resolution aware, which means that content can appear slightly off place |Layouting becomes exceptionally difficult when DOM content changes on regular basis. DOM mode is error-prone in this case (note that making the algorithm more tolerant will result in false-positives).|
# Working with it
As a Site Author you can enable the grid per site. Once enabled, choose a [suitable HTML template](#HTML-templates) for your site. Start to create content!
> [!Note]
Grid mode does not support responsive designs where content changes its position according to zoom or wrapping-effects!
## Changing the template
Either use id's or delete hotspots before changing the template.
## Stopping work with it
There is no button to turn the grid mode off, delete the template code to turn it off!
# HTML-templates
## Simple table
![[hotspot_grid_preview_simple.png]]
```html
<table>
<tr height="100px">
<td width="100px"></td>
<td></td>
<td></td>
</tr>
<tr height="100px">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="100px">
<td></td>
<td></td>
<td></td>
</tr>
</table>
```
## Office Online App Overlay
![[hotspot_grid_preview_office_overlay.png]]
Preview:
![[hotspot_grid_preview_office_overlay_preview.png]]
```html
<table>
<tr height="45px">
<td width="10%"> </td>
<td> </td>
<td width="10%"> </td>
</tr>
<tr height="30px">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr height="90px">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr height="25px">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
```