How to create a split section using grid

Desktop layout

1. Apply a 2X1 grid to a blank section.

2. Add a container to the left column and stretch it by clicking on the “Stretch” button. The container will serve as the background of that column.

3. Apply a color to the container.

4. Add the content to the left column by dragging it to the container. You can add different elements or use a design asset, if you’ve created it. In this design example, we see a paragraph with a text scale property and a button that have been stacked.

5. Align the stack to the middle. Then, dock it to the left as well as the right and set the margins from the left & right.

6. Add an image to the right column and stretch it to fill the entire cell. If the image has a different ratio then the actual column, you can simply adjust the focal point.

7. Add another element to the right column, over the added image. Dock it to the left and the bottom of the container. Apply a margin of 50px from the bottom. All the other margins should be set to 0%.

8. To set the section height to be dependent on it’s relevant content, in this case the stack—remove the min height of the section by setting it to ‘None’ from the inspector panel. Also, remember to edit the section grid and set the row height to auto.

9. To add space between the content and it’s parent, set margins to the top and bottom of the stack.

Adjust per breakpoints

10. Select the tablet breakpoint.

11. Adjust the grid of the section to 1X2—in order to become 2 rows instead of 2 columns.

12. To rearrange the content in each row, you can use the grid area in the inspector panel, or simply drag it.

13. To place the container with the text on the second row, click on the container and change the row to start on 2 and to end on 3.

14. To place the picture on the first row, click on it and change the row to start on 1 and end on 2, using the grid area in the inspector panel. If you placed an element on top of the image, as done in this design, then you will need to change it’s grid area as well.

15. To make sure that the image on the top row isn’t too small, edit the section grid and set the first row to a min of 400px. In order to maintain the image ratio as the screen scales—set the max height property of the row to 50vw.

Note: the grid layout applied to the tablet breakpoint will automatically cascade to appear the same on mobile.