Grid Item
Introduction
Welcome to the Grid Item component documentation! As part of the page builder in App Platform, the Grid Item component is used in conjunction with the Grid Container to structure and align content within a grid layout. This component allows for precise placement and organization of elements like text, images, buttons, and more within individual grid cells, enabling a clean and responsive design for your web applications.
Why we developed it
The Grid Item component provides detailed control over the layout of elements within a grid system. It helps developers and designers specify the size, position, and behavior of content within the grid, ensuring that each element aligns perfectly and behaves responsively across different devices and screen sizes.
What it could be used for
Organizing content into columns and rows for better visual hierarchy and readability.
Creating responsive designs that automatically adjust layout elements based on screen size.
Aligning and distributing space among elements evenly within a grid layout.
Enhancing the aesthetic appeal of pages by enabling sophisticated layout designs.
Example \ Use Case
In a client reporting dashboard managed by an MSP, the Grid Item component could be used to organize various performance metrics into a structured layout. Each metric, such as network uptime, system load, and incident response times, could be displayed in individual grid items that are part of a larger grid container. This arrangement not only makes the dashboard more navigable and easier to read but also allows each metric to be resized and reordered effortlessly as per the client’s preference or device being used. This structured approach ensures that critical data is presented in a clear, coherent manner, enhancing the usability of the dashboard.
Grid Item vs. Grid Container
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.
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.
Adding a Grid Item 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 Item' component in the component library, then drag and drop it onto the canvas.
Configuring the Grid Item component
Select the component: Click on the added 'Grid Item' 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
