Creating 3 different side-by-side designs

Before you get started

In this example, we’ll explore 3 different strategies for creating side by side designs.  To follow along, open up the template in the editor.

Part 1: Container and grid

1. From the Add panel, add a container and attach to the sectionFrom the Inspector panel remove the container color

2. Add a 2x1 grid to the containerDrag the buttons to the container

3. From the Inspector panel, reposition the buttons

4. Still in the Inspector panel, under grid settings, remove row height, set to max content and add gaps of 20px

5. Reposition the container to bottom center of section

6. Select the container and buttons using shift, then select Stack from the floating action bar

7. Set spacing to 60px

Part 2: Grid and docking

1. Add a 2x2 grid with columns set as 1fr each and rows as min and max

2. From the Add panel, under Assets, add text to first cell, center align it and dock to left side and set docking as 60 px

3. Again from Assets, add the stack to bottom 2 cells

4. Set top docking and dock to right side with a 20% margin

Part 3: Layouter

1. From the Add panel, drag in a Layouter to the section

2. From the Inspector panel, align the Layouter to the center and change its width to 80%

3. Change the Layouter display type to bricks, add gaps

4. Set alignment to center

5. Select 1st item, then in Inspector panel set width 100% and remove the background color

6. From Assets, add title and center it, then remove other items

7. Remove color background, add a grid & a horizontal gap of 10 px to create space

8. From Assets, add vector art and text

9. Align all the elements to left and top

10. Change both columns’ sizing to max content, remove min height, set row to max content

11. Duplicate the items 3 times, then replace vector art and text for each item