The Grid component is a powerful, mobile-first flexbox system for building custom layouts. It consists of three units: Grid, Row(s), and Cell(s). Cells expand to fill the row and resize to accommodate additional cells. The system is based on a 12-cell layout with different breakpoints based on screen size. You can customize the number of cells using CSS.

📘
Grid Video Tutorial
Check out this Appery.io YouTube Education Guide video to learn how to arrange components on screen using the Grid component:

Properties

🚧
Important Note!
This document lists properties specific to this UI component. For properties common to most UI components, please see the General components document.

The Grid component has the following Common properties:

Property Name	Property Description
Grid	When set to False, rows are used without a grid. The default is True.
Padding	Adds padding to the grid and immediate child columns. Possible values are Padding, No Padding, Padding Top, Padding Start, Padding End, Padding Bottom, Padding Vertical, and Padding Horizontal.

Visit the Ionic documentation to read more about Grids.

📘
Note!
When working with the Grid component, pay attention to the Breadcrumbs above the phone frame.

Grid Row

To add a Grid Row, click the + button on the Grid. By default, a new row with two Grid Cells is created.

Under the Styles tab, Grid Row components have the following additional styling properties:

Property Name	Property Description
Justify Content	Horizontal alignment of all cells (start, center, end, space-around, space-between, space-evenly).
Align Items	Vertical alignment of all cells (start, center, end, stretch, baseline), unless they specify their own alignment.
Flex Wrap	Wrapping behavior of cells: wrap, nowrap (forces cells to a single row), or wrap reverse (cells wrap in reverse order).

Here is more information about Grid Row.

Grid Cell

Click the + button on the selected Grid Row to add a new Grid Cell.

Under the Styles tab, Grid Cell components have the following additional styling properties:

Property Name	Property Description
Size	The size of the cell in terms of how many columns it should occupy out of the total available. If auto is used, the cell will be sized to its content. • Size - the size of the cell for all screens • Size Lg - the size of the cell for large screens • Size Md - the size of the cell for medium screens • Size Sm - the size of the cell for small screens • Size Xl - the size of the cell for extra-large screens • Size Xs - the size of the cell for extra-small screens
Offset	The amount to offset the column in terms of how many columns it should shift to the right of the total available. • Offset - the offset of the cell for all screens • Offset Lg - the offset of the cell for large screens • Offset Md - the offset of the cell for medium screens • Offset Sm - the offset of the cell for small screens • Offset Xl - the offset of the cell for extra-large screens • Offset Xs - the offset of the cell for extra-small screens
Pull	The amount to pull the cell in terms of how many columns it should shift to the left of the total available. • Pull - the pull of the cell for all screens • Pull Lg - the pull of the cell for large screens • Pull Md - the pull of the cell for medium screens • Pull Sm - the pull of the cell for small screens • Pull Xl - the pull of the cell for extra-large screens • Pull Xs - the pull of the cell for extra-small screens
Push	The amount to push the cell in terms of how many columns it should shift to the right of the total available. • Push - the push of the cell for all screens • Push Lg - the push of the cell for large screens • Push Md - the push of the cell for medium screens • Push Sm - the push of the cell for small screens • Push Xl - the push of the cell for extra-large screens • Push Xs - the push of the cell for extra-small screens
Align Self	Vertical alignment of the individual cell (auto, start, center, end, stretch, baseline), overriding the row's alignment setting.
Bg Image	Click the Change button to select an uploaded image from Media Manager. • Position sets the starting position of a background image: top, bottom, center, left, right, initial, inherit • Repeat sets how a background image will be repeated: repeat, repeat-x, repeat-y, no-repeat, space, round, initial, inherit • Size specifies the size of the background image: auto, cover, contain, initial, inherit
Text Alignment	Aligns the inline contents. Possible values are text-left, text-right, text-start, text-end, text-center, and text-justify. Read more about Text Alignment.

📘
Screen Size Information
Specific properties are used to set values based on screen sizes (e.g., Pull Sm means that the Pull property will be applied when screen sizes are Sm and larger).
Screen size breakpoints:

xs - 0px

sm - 576px

md - 768px

lg - 992px

xl - 1200px

For more information about Grid Cell, see the Ionic documentation.

📘
Tutorial Reference
You can check this tutorial to learn how the Grid component can be used in Appery.io.