Widget Sizing and Grid Layout
Overview
Learn Amp's Dashboard uses a responsive grid system to arrange widgets. Understanding how this grid works helps you create well-organised Dashboards that look great on all devices while making the best use of available space.
Each widget has default dimensions and resize constraints that determine how it can be arranged and adjusted within the Dashboard layout.
Functionality Breakdown
The Grid System
Dashboards use a 6-column grid system:
Property | Value |
|---|---|
Total columns | 6 |
Default widget height | Varies by widget type (typically 2-4 grid units) |
Widget width | 1-6 columns |
Widgets snap to grid positions when placed or resized, ensuring consistent alignment across your Dashboard.
Widget Dimensions
Each widget type has default and constrained dimensions:
Dimension | Description |
|---|---|
Width | Default number of columns the widget occupies |
Height | Default number of rows the widget occupies |
Min Width | Minimum columns allowed when resizing |
Max Width | Maximum columns allowed when resizing |
Min Height | Minimum rows allowed when resizing |
Max Height | Maximum rows allowed when resizing |
Resize Behaviour
Widgets fall into three categories:
Behaviour | Description | Examples |
|---|---|---|
Fully resizable | Can be resized within min/max constraints | Most data widgets, charts |
Partially resizable | Can resize in one direction only | Some carousel-style widgets |
Fixed size | Cannot be resized at all | Search bar, Channel carousels, To-do list |
💡 Tip: Fixed-size widgets are optimised for their content type. For example, the Search Bar spans the full width for easy access, while Channel carousels need consistent height to display content properly.
Widget Layering (Z-Index)
Some widgets display above others when they overlap or have dropdown menus:
Widget | Layering | Reason |
|---|---|---|
Search Bar | High (z-index: 3) | Dropdown search results need to appear above other content |
Bookmarked Content | Medium (z-index: 2) | Dropdown menus for actions |
Standard widgets | Default | Normal layering |
Widget Size Reference
Learning Widgets
Widget | Default Size | Resizable | Notes |
|---|---|---|---|
Search Bar | 6×1 | No | Full width, fixed height |
Assigned Channels | 6×3 | No | Full width carousel |
Bookmarked Content | 3×3 | Yes | Height: 3-6, Width: 2+ |
Due Soon | 6×3 | Yes | Height: 3-6, Width: 3+ |
Featured Channel | 6×3 | No | Full width carousel |
Featured Image | 3×3 | Yes | Height: 2-3, Width: 2+ |
Featured Video | 3×3 | Yes | Width: 3+ |
Highest Rated | 3×3 | Yes | Height: 3-4, Width: 3+ |
Most Completed | 3×3 | Yes | Height: 2-6, Width: 2+ |
Most Popular Content | 3×3 | Yes | Height: 3-4, Width: 2+ |
My Learnlists | 6×3 | No | Full width carousel |
My Teams | 6×3 | No | Full width display |
All Teams | 6×3 | No | Full width display |
New Content | 6×3 | No | Full width carousel |
Pick Up Where You Left Off | 6×3 | No | Full width carousel |
Recommendations | 6×3 | No | Full width carousel |
Shared Content | 3×3 | Yes | Height: 3-6, Width: 2+ |
To-do List | 6×3 | No | Full width list |
Upcoming Events | 3×3 | Yes | Height: 3-6, Width: 3+ |
Upcoming Tasks | 3×3 | Yes | Height: 3-6, Width: 3+ |
Visible Channels | 6×3 | No | Full width carousel |
Banner | 6×3 | Yes | Height: 1-4, Width: 3+ |
Comparison Report | 6×3 | Yes | Height: 3-6, Width: 4+ |
Assigned vs Discovered | 3×3 | Yes | Height: 3-6, Width: 2+ |
External Link | 3×3 | Yes | Height: 2-3, Width: 2+ |
The Due Soon Widget defaults to full width (6 columns) to give its multi-column table enough room to breathe. You can resize it, but a minimum of 3 columns is required for the layout to work properly. Expand the height up to 6 rows if you want to see more results without scrolling.
Connect Widgets
Widget | Default Size | Resizable | Notes |
|---|---|---|---|
Recent Announcements | 3×4 | Yes | Height: 2-6, Width: 2+ |
Recent Q&A | 3×3 | Yes | Height: 2-6, Width: 3+ |
Recent Discussions | 3×3 | Yes | Height: 2-6, Width: 3+ |
Recent Messages | 3×3 | Yes | Height: 2-6, Width: 3+ |
Most Q&A Answers | 3×3 | Yes | Height: 2-6, Width: 3+ |
Most Discussions | 3×3 | Yes | Height: 2-6, Width: 3+ |
Total Shares | 2×2 | Yes | Height: 2-3, Width: 2+ |
Q&A Posts | 2×2 | Yes | Height: 2-3, Width: 2+ |
Discussions Count | 2×2 | Yes | Height: 2-3, Width: 2+ |
Perform Widgets
Widget | Default Size | Resizable | Notes |
|---|---|---|---|
Objectives | 6×2 | No | Full width list |
My Objectives | 3×3 | Yes | Height: 2-6, Width: 2+ |
Objectives Breakdown | 3×3 | Yes | Height: 3-4, Width: 2+ |
Objectives Progress Chart | 3×3 | Yes | Height: 3, Width: 2+ |
Objectives Status | 3×3 | Yes | Height: 3, Width: 2+ |
Objectives Team Comparison | 3×3 | Yes | Height: 2-6, Width: 2+ |
1:1 Completion | 3×3 | Yes | Height: 3-4, Width: 2-4 |
1:1 Team | 3×3 | Yes | Height: 2-6, Width: 2+ |
Skills Widgets
Widget | Default Size | Resizable | Notes |
|---|---|---|---|
My Skills | 6×2 | No | Full width display |
Associated Skills | 6×2 | No | Full width display |
Skills Experts | 6×3 | No | Full width display |
Skills Events | 6×2 | No | Full width display |
Skills Recommendations | 6×3 | No | Full width display |
Role Skills | 6×2 | No | Full width display |
Own Skills Distribution | 6×3 | Yes |
|
Skills Matrix | 6×3 | Yes |
|
Skills Gap Analysis | 3×4 | No |
|
Skills Comparison | 3×4 | No |
|
Skills Rating vs Target | 3×3 | No | User-configurable skills |
Skills Rating vs Manager | 3×3 | No | User-configurable skills |
Top Users with Skill | 3×3 | Yes | Height: 3-6 |
Skills Distribution | 3×3 | Yes |
|
Skills Frequency | 3×3 | Yes | Height: 3 |