Creating a CSS Grid layout

To activate the CSS Grid controls, select any Container element on the canvas and go to Styles pane → Layout → Display → Grid. Click the Launch Grid Editor button to open the Grid control panel.

In that panel you’ll find the most important controls for setting up your grid. You can attach the controls as a panel or as a dialog, using the Attach as right panel or Center in app green button.

Here’s a complete example, from empty containers to a layout that restacks on small screens.

1. Configuring the parent and children containers

First, prepare the base structure. Use a parent container with a min-height of 100vh — vh stands for viewport height, so the parent takes at least 100% of the canvas height.

Then drag in the containers that will become its children. Give each a different colour so they’re easy to tell apart, and remember to give each a meaningful class name.

2. Naming the grid areas on the children

Give every child container a name for the grid area it will sit in. For each element, go to Styles pane → Layout → Grid and Flexbox Layout, then in the Grid subsection use the Grid dropdown to select Grid Area Based Placement.

In the Name box, delete the placeholder elementArea and enter the name you’ll use in the Grid Settings in the next step. This example uses header, article-1, article-2 and footer.

3. Configuring the grid on the parent

Select the parent Container on the canvas, go to Styles pane → Layout → Display → Grid, and click Launch Grid Editor.

With the editor open, create the layout: grid columns and rows — grid tracks — are added with the respective + buttons.

Now assign the grid area names you configured in step 2. Click a cell to open its text input, and type the name either directly in the cell or in the Selection Settings → Cell Name box.

4. Fixing the grid

Next, resize the rows so the two middle areas get more room. Click the header on the side where the text auto appears; the panel beneath the grid builder changes to the appropriate Selection Settings.

Give the first and last rows a Height of MinMax, with 25vh in the Min field and auto for Max. Those rows then take at least 25% of the canvas height, and can still grow if they need to.

For the middle row, use MinMax again with 50vh in Min and auto for Max.

5. Adding content to the grid

Now add content to the grid areas. This example just adds headings to identify each section; in a real project you’d put navigation in header, links in footer, and the actual content in article-1 and article-2.

6. Making the grid responsive

Move the slider to see the layout on smaller screens: the space for article-1 and article-2 becomes too small, and both sections should stack instead of sitting side by side.

Move the slider to the position where the stack should happen and add a breakpoint there, if you don’t have one already. Make sure the breakpoint is active — click it, or check that it has a darker mark inside.

With the breakpoint active, launch the Grid Editor again and modify the setup:

1. Add a new row with the + button.
2. Change the sizes so all rows now use 25vh, as in step 4.
3. Rename the areas so each row holds one of header, article-1, article-2 and footer.

7. Playing with the grid

With the base structure working, you can tweak the area names in the Grid Editor to create quite different layouts.