Pages and layouts use the 12 grid system, which means that each page is divided into 12 equal columns and you can choose how big or small each component will appear on your page.
Pages are structured with rows, columns, and components. You can customize your page in the following order:
- Add your row
- Add your columns into the rows
- Add components into columns
Structuring your page is truly that simple. We'll go through each step below.
First, let's add a row by selecting +Add Row and choose the column layout we wish to add to the row, keeping in mind that each page is divided into 12 columns:
In our example, we've just added a row with a single column that will take up the entire row. Now, let's add a component to our column that we just created by clicking on the squared plus sign:
In this example, we'll add a form component to the column to display our Projects Data Table:
Now that we've added a form into the column which takes up the entire row, if we preview the page we'll see that the form takes up the entire page, just as we designed:
Now, let's say we wanted to change the size of the form to take up less or more space on the page. We can easily change the component size by shrinking the column which contains this form. Simply hover over the column and click on the - (minus) button icon in the column. Each press shrinks the column by one. For example, if we want to change the form from 12 columns to only 6 columns (1/2 the page) we'd press the minus button 6 times:
The result will then look like this:
As you can see, our Projects form component now only takes up half the page instead of the entire page as before.
Don't forget, you can always preview your page by clicking on the eye ball icon on the top right of the page: