Creating a 3-Column Section Using Grid Layout in Locofy.ai

In this guide, you will learn how to build a responsive 3-column layout section using the advanced CSS properties available in Locofy.ai. The image below shows the design that we'll be working on.

Styling and Layout Editing

To utilise the grid property, we need to access Step 3: Edit styling & layout (opens in a new tab). Clicking the "Edit" option in Locofy.ai will open a window with various editing options.

To access the "Advanced CSS Properties," scroll down to the bottom of the options. To make the selected frame the "Payout Container" a 3-column grid section, we need to add specific properties as demonstrated below.

The properties we have set under the "Advanced CSS Properties" ensure that we have three equal columns with a 50px gap on the default screen. To handle other screen sizes you can see the specific customization below:

By following these simple steps you can make 3 column responsive sections that work on Desktop, tablet and mobile.