Overview
The following diagram shows a grid layout with a single column and 2 rows:
| Width: | The width of the column in pixels. You should only enter a number. Type * to allow the browser to automatically adjust the width of the column. |
| Column spacing: | The amount of spacing or padding between each column, in pixels. You should only enter a number. The default is no spacing, which means that the elements may butt up against each other. |
| Height: | The height of the row in pixels. You should only enter a number. Type * to allow the browser to automatically adjust the height of the row. |
| Row spacing: | The amount of spacing or padding between each row, in pixels. You should only enter a number. The default is no spacing, which means that the elements may butt up against each other. |
Tutorial
Grid-based layouts are one of the easiest ways to get started in designing a dashboard. A grid-based layout provides the basis for a balanced design, and is also easy to visualise.
In Explorer, you can lay out the elements of your page as if you were putting one element in each cell, just like you would in Excel®. It's a simple concept, but you can achieve some complex layouts when you add a grid layout inside another grid layout - which is how you effectively "split" cells.
In this topic, we'll show you how to use the grid layout to design a simple dashboard.
Before we get started, here are some simple examples of grid-based page design:
 |
 |
 |
Now, let's look at the following dashboard. It's a bit more complicated than the above examples, but not by much.
Royalties Dashboard
We're going to break this down into what the grid layout looks like, and then how to construct it. The image below left (Breakdown #1) shows you that this dashboard actually follows the first simple structure shown in the layout examples above.
 |
 |
| Royalties Dashboard - Breakdown #1 | Royalties Dashboard - Breakdown #2 |
Breakdown #2 (above right) shows how the Header and Content sections are then further broken down. The Header cell is then divided into 2 further cells, and the Content cell is divided into 4 further cells. In fact, Breakdown #2 has a grid layout inserted into the header cell, and another grid layout inserted into the content cell!
Now, let's look at how we're actually going to do this, step-by-step.
Step by Step: Creating a Grid Layout for a Dashboard
Before you start, open a new tab in Explorer and click the "Create a New Page in Studio Mode" thumbnail. You should have a blank canvas to start with.
Step 1. Add a grid layout to the page
On the left, scroll down until you see the Grid Layout component, and then drag and drop it onto the canvas. Watch the short video above to see how to do this. Note: There are other ways you can do this.
Step 2. Add rows and columns to create header and content areas
- We now need to add 2 rows, which will contain the header and the content.
- We want the header to be shorter than the content area, so let's make the first row 200px high.
- We also want to add a bit of spacing between the rows so the dashboard doesn't end up looking cramped. Let's make this 10px.
Step 3. Add another grid layout into the header area
Let's embed another grid layout into the header area. Drag and drop it from the left.
Step 4. Add rows and columns to the header area
- We want to divide the header area into two columns.
- The left column will contain the page title, and the other will contain the data filters.
- Let's give the first column a width of 260 because the title text shouldn't take up much space.
- Let's also add a column spacing of 10 so it doesn't look cramped.
Step 5. Add another grid layout into the content area
This time, let's embed another grid layout into the content area. Drag and drop it from the left.
Step 6. Add rows and columns to the content area
- We want to divide the content area into 4, so lets add 2 rows and 2 columns.
- Let's leave the height and width to whatever so that the layout will resize nicely when the browser resizes.
- However, let's add a spacing of 10 to both rows and columns, to avoid any cramping.
Step 7. Add a grid layout to the right header cell and format it
Let's finish laying out the header.
- In the right cell of the header we just want to add the title, so there's no further splitting required.
- However, in the right cell we want to add a number of controls, and each control will have a label above it.
- So we need to divide this cell into 6 columns (one for each control) and 2 rows (so we can add labels for each control).
- Let's make the top row 30 high, because the labels won't be big, and leave the rest of the heights and widths as default.
- Finally, let's space the columns and rows at 5, to avoid cramping.
Step 8. Add a grid layout to each of the content cells and format them the same
In each content cell, we want to add a chart and a title for the chart, so they will be formatted in the same way. You will need to do this one by one. You can start anyway, but for this tutorial we will start from the top left content cell.
- Add a grid layout to the top left content cell.
- Add a row, and give that row a height of 20.
- There's no need to add any spacing if you don't want to.
- Do the same for the remaining content cells.
Step 9. Refine the top right content cell
We're nearly done, but you might have noticed in the original dashboard picture, the top right chart actually has some other links to the right of the title (Oil, Gas, NGL). Let's just quickly create a layout for those links.
- Add a grid layout to the top right content cell.
- Add 4 columns.
- Now, we want the 3 columns on the right to all be the same width, and as the links will only be short, lets' set the width to 50 .
- We also want the links to be nicely spaced out, so lets as a column spacing of 5.
Step 10. All done!
Congratulations! You now have a nice grid layout for your dashboard. All you need to do is add the components and your dashboard will be ready to use.
Don't forget to save your page!