How to Use the Grid System Component

The GridSystem component is designed to help you create structured, responsive layouts in OutSystems with ease. You can use it to arrange static elements or even display dynamic content from lists. Below is a step-by-step guide on how to use it effectively.

1. Adding the Grid System to Your Screen

1. Drag and drop the Grid System component onto your screen.
2. Inside the component, place your content elements (e.g., containers, cards, images, buttons, or text).

2. Configuring the Grid Layout

The component has several input parameters to control the layout:

• GridTemplateColumns ? Defines the number of columns.
• GridTemplateRows ? Defines the number of rows.
• GapColumns ? Sets horizontal spacing between grid items.
• GapRows ? Sets vertical spacing between grid items.
• JustifyItems ? Aligns items horizontally ("start", "center", "end", "stretch").
• AlignItems ? Aligns items vertically ("start", "center", "end", "stretch").
• ExtendedClasses ? Allows adding custom CSS classes for further styling.

It can be used with a list inside if needed.