Aligning and grouping elements using a grid

Grids can be used for two purposes. They can used to position widgets side by side, but they can also be used to make your site response for mobile devices. A grid has multiple columns that can wrap on devices that have less screen real estate.

1. Add a grid just like you would add any other widget byclicking the blue plus button at the bottom on a section.

2. When you select the grid, you can change the number of columns in the settings. The total width of the grid can be changes under dimensions.

You can add widgets to each column by clicking their add button.
Column widths can be changed in the grid settings, under the columns section.

3. Now we want to optimize the layout, from the previous step, to be suited for mobile devices.

Click the device selector at the top of the screen and enable customization for the mobile device.
Then click the mobile device next to the customize switch to change the studio dimensions to a mobile device form factor.

4. Any layout changes you make while the mobile device is active will only be visible on mobile devices.

The mountains should be full width and station and siberia should each be half the screen width. You can change this by changing the column widths under the grid settings.