Grid
The grid is enabling responsive design and the possibility to easily rescale widgets.
An instance of AURUM Navigation is considered to be a 12-column grid. This means a widget’s size is stored as how many columns and rows it spans.
Breakpoints
The amount of columns is related to the width of the user’s device:
- 12 columns: 1024px and greater
- 10 columns: 768px and greater
- 8 columns: 640px and greater
- 4 columns: 320px and greater
- 2 columns: 319px and smaller
Those breakpoints respect the Microsoft design guidelines.
🟡 The grid always has 12 columns in edit mode and breakpoints are disabled.
Resizing of widgets
A widget’s size is stored as how many columns and rows it spans. Change the size of a widget by grabbing the resize control and move your mouse.
If widgets are placed next to each other and the width of the user’s device changes, they may wrap to the next row.
If a widget spans more columns than the user’s device provides, it rescales automatically to match the full possible width.
Moving of widgets
A widget can be placed at any place of your grid while in edit mode. Hover the widget and click the gray overlay that appears.
The grid tries to fill empty space and respect the user’s device if you leave edit mode. So be aware that the position of a widget may change.