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 Tutorial
You 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. Size - the size of the cell for all screens. Size Lg - the size of the cell for Lg screens Size Md - the size of the cell for Md screens Size Sm - the size of the cell for Sm screens Size Xl - the size of the cell for Xl screens Size Xs - the size of the cell for Xs 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 Lg screens Offset Md - the offset of the cell for Md screens Offset Sm - the offset of the cell for Sm screens Offset Xl - the offset of the cell for Xl screens Offset Xs -the offset of the cell for Xs screens. |
| Pull | The amount to pull the cell, in terms of how many cells 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 Lg screens Pull Md - the pull of the cell for Md screens Pull Sm - the pull of the cell for Sm screens Pull Xl - the pull of the cell for Xl screens Pull Xs - the pull of the cell for Xs screens. |
| Push | The amount to push the cell, in terms of how many cells 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 Lg screens Push Md - the push of the cell for Md screens Push Sm - the push of the cell for Sm screens Push Xl - the push of the cell for Xl screens Push Xs - the push of the cell for Xs screens. |
| 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. 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 images: auto, cover, contain, initial, inherit. |
| Text Alignment | Align the inline contents. Possible values are text-left, text-right, text-start. text-end, text-center, text-justify. Read more about Text Alignment. |
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 about 5 hours ago