Working with Grid System
In this video you will understand how to build cards layout using Data group component. You can display a fill width cards, 2 column, 3 columns, 4 column layouts etc. so you can display multiple cards in a single row while making responsive cards.
1. Organize Cards Data
To organize the cards, go to the Components and choose Rows in Data Group and Save these settings. To build the cards layout and to also make it responsive, drop a column, inside the Data Group and move the cards inside this column.
Go to Component and choose Column. Here open the Settings icon and define the width of each column as you want to present it and Save it. Here you can create 2 cloumn, 3 column, 4 column layouts etc.
2. Move Cards into Column
Go to the Layer Manager and drag and drop the cards inside the Column and Save the changes. Then Reload the page to view the changes.
3. Customize your Cards
To further customize your cards you can choose the Pre-built layouts in the Cards component. To apply any layout simply drag and drop it inside the Data Group and the Column you created. Then Save the changes.
Similarly you can customize the image, add background colour and make changes to the cards as need be. Now Reload the page to view new changes.
You can also go to the Inspect Element and change the layout to Tablet and mobile to view how cards will appear in these screens.
