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.
![](/docs/3-col-grid/image1.png)
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.
![](/docs/3-col-grid/image2.png)
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.
![](/docs/3-col-grid/image3.png)
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:
![](/docs/3-col-grid/image4.png)
By following these simple steps you can make 3 column responsive sections that work on Desktop, tablet and mobile.