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.

Adding a Grid Container to Your Page

  1. Access the Canvas: Open the page you're working on in your drag-and-drop website builder.

  2. Drag-and-Drop: Locate the Grid Container component in your component library, then drag and drop it onto the canvas.

Configuring the Grid Container

  1. Select the Grid Container: Click on the added grid container to select it.

  2. Properties Panel: On the properties panel, you'll find various configurable options:

    • Styles: Customize the appearance of the grid container with additional CSS styles.

  3. Live Preview: The canvas provides a live preview of your grid container as you make changes.

Grid Container vs. Container

  • Container Component: The Container component is a versatile element for structuring content and styling containers. It allows for flexible arrangements but does not enforce a grid structure.

  • Grid Container Component: The Grid Container component, on the other hand, is specifically designed to create layouts with a grid structure. It simplifies the process of aligning and organizing content in a grid format.

Why Use the Grid Container Component?

  • Structured Layouts: Grid containers provide a systematic way to arrange content in rows and columns.

  • Responsive Design: Easily create responsive designs with grid-based layouts.

  • Consistent Alignment: Achieve consistent alignment and spacing between items.

Now you're ready to create well-organized grid layouts for your website! If you have any questions or need assistance, feel free to reach out to our support team. Happy designing! πŸŽ¨πŸš€

Last updated