Grid
Overview of the Grid Component
The Grid component is a powerful mobile-first flexbox system for building custom layouts.
It is composed of three units — Grid, Row(s) and Cell(s). Cells will expand to fill the row and will resize to fit additional cells. It is based on a 12-cell layout with different breakpoints based on the screen size. The number of cells can be customized by using CSS.
Grid Video TutorialYou can check this Appery.io YouTube Education Guide video to learn how to arrange components on the screen using the Grid component:
Properties
Important Note!This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.
Grid has the following Common properties:
Property Name | Property Description |
---|---|
Grid | If set to False, rows are used without a grid. The default is set to True. |
Padding | Add paddings to the grid and immediate children columns. The possible values are Padding, No Padding, Padding Top, Padding Start, Padding End, Padding Bottom, Padding Vertical, 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 will be created.
Under the Styles tab, Grid Row components have the 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 of cells: wrap, nowrap - forces the cells to a single row, or wrap reverse - the cells will wrap in reverse. |
Here is more information about a 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 additional styling properties:
Property Name | Property Description |
---|---|
Size | The size of the cell, in terms of how many cells it should take up out of the total available. If auto is passed, the cell will be the size of its content.
|
Offset | The amount to offset the column, in terms of how many columns it should shift to the right of the total available.
|
Pull | The amount to pull the cell, in terms of how many cells it should shift to the left of the total available.
|
Push | The amount to push the cell, in terms of how many cells it should shift to the right of the total available.
|
Align Self | Vertical alignment of all columns (auto, start, center, end, stretch, baseline), unless they specify their own alignment. |
Bg Image | Click the Change button to select the uploaded image from Media Manager.
|
Text Alignment | Align the inline contents. |
Specific properties are used to set values based on screen sizes (e.g. Pull Sm means that the property Pull will be applied if screen sizes are Sm and larger).
Screen sizes:
xs - 0px;
sm - 576px;
md - 768px;
lg - 992px;
xl - 1200px.
Here is more information about Grid Cell.
You can check this tutorial to learn how the Grid component can be used in Appery.io.
Updated 17 days ago