Grid Container
Introduction
Welcome to the Grid Container Component documentation! As part of the page builder in App Platform, the Grid Container component allows you to create organized layouts with a grid structure. This documentation provides instructions on adding a Grid Container to your canvas and customizing its properties.
Why we developed it
The Grid Container component provides a flexible and powerful way to arrange UI elements within a web page. Utilizing a grid system enables designers and developers to place content in a consistent, aligned, and orderly manner, improving both the aesthetics and functionality of the application's interface.
What could it be used for
Creating complex page layouts with multiple sections and alignment.
Ensuring content is responsive and adapts to various screen sizes and orientations.
Aligning components precisely within a page, enhancing the visual structure.
Organizing text, images, and interactive elements in a clean, navigable format.
Example \ Use Case
Imagine a real estate website where property listings need to be displayed in an organized manner. The Grid Container can be used to create a uniform grid layout where each property's image, description, and key details are presented in individual grid cells. This setup allows users to easily compare listings and navigate through options without overwhelming visual clutter, enhancing user experience and engagement.
Grid Container vs. Container
Grid Container Component: The Grid Container component is specifically designed to create layouts with a grid structure. It simplifies the process of aligning and organizing content in a grid format.
Container Component: The Container component, on the other hand, is a versatile element for structuring content and styling containers. It allows for flexible arrangements but does not enforce a grid structure.
Grid Container vs. Grid Item
Grid Container Component: The Grid Container acts as the foundational element of a grid layout. It defines the overall grid structure within which Grid Items are placed. It sets the framework for how the grid behaves and how items within it are aligned and distributed.
Grid Item Component: The Grid Item component is used within a Grid Container to place individual elements like text, images, buttons, etc. It represents the content blocks that fill the grid defined by the Grid Container.
Adding a Grid Container to your page
Access the Canvas: Open the page you're working on in edit mode, in App Platform.
Drag-and-Drop: Locate the 'Grid Container' component in the component library, then drag and drop it onto the canvas.
Configuring the Grid Container component
Select the component: Click on the added 'Grid Container' component to select it.
Properties Panel: On the properties panel, you'll find various configurable options:
In-line styles: Define custom CSS properties for the component.
Live Preview: The canvas provides a live preview of your configured component(s) once you've made changes.
If you have any questions or need assistance, feel free to reach out to our support team. - Happy designing! 🎨🚀
Last updated
