Responsive Grid
The Responsive Grid Widget provides a flexible way to organize your page into structured rows and columns. It allows you to build adaptive layouts that respond to different screen sizes, making it ideal for creating clean, organized, and responsive UI designs. With precise control over spacing and column distribution, it enhances layout consistency and usability across devices.
Responsive Layouts: Automatically adjusts for desktop, tablet, and mobile screens.
Customizable Grid Structure: Define the number of columns, row height, and spacing.
Precise Placement: Allows detailed control over widget alignment using column spans.
Flexible Gaps and Sizes: Set row and column gaps for cleaner layout spacing.
Equal or Proportional Columns: Choose between equal-width columns or specify proportions.
Common Use Cases
Building dashboards with widgets arranged in multiple columns
Creating responsive product listing pages
Designing adaptive UI layouts with auto-wrapping content
Organizing forms and content into structured sections
Widget Settings
Setting
What it Does
How to Configure
Row Height
Sets the vertical height of each row in pixels. Affects the vertical spacing and content alignment.
Enter a pixel value (e.g., 100) to define the height of each row.
Row Gap
Defines the vertical spacing between grid rows. Helps manage white space and readability.
Enter a pixel value (e.g., 20) to set the gap between rows.
Column Gap
Specifies the horizontal spacing between columns. Ensures clarity between content columns.
Input a pixel value to define the gap between columns.
Columns
Determines the total number of columns in the grid. Higher counts give more placement flexibility.
Enter an integer value (e.g., 12) to define the total column count.
Column Width
Lets you define relative widths for columns using proportional values.
Input values like 100, 50, 50 for a 3-column grid to split the space as 50%, 25%, 25%.
How to Use
• Step 1: Add the Widget to the Page:
▪ Drag and drop the Responsive Grid Widget into the desired section of your page layout.
• Step 2: Configure the Grid Layout:
▪ Set the number of columns and define the column widths if needed. This controls how your content will span the grid.
• Step 3: Adjust Spacing:
▪ Use the Row Gap and Column Gap settings to refine vertical and horizontal spacing between items.
• Step 4: Define Row Height (if needed):
▪ Set a consistent row height for uniform appearance and better alignment across content blocks.
• Step 5: Preview on Multiple Devices:
▪ Use responsive settings to preview and tweak layout behavior for desktop, tablet, and mobile views.
Last updated