Working with Grid Layout
1. Using IonGrid Component
| Property | Values | Description |
|---|---|---|
| ion-grid | IonGrid |
Root component for the grid layout system |
| ion-row | IonRow |
Represents a row in the grid layout |
| ion-col | IonCol |
Represents a column in the grid layout |
Example: Basic Grid Layout
<ion-grid>
<ion-row>
<ion-col size="6">Column 1</ion-col>
<ion-col size="6">Column 2</ion-col>
</ion-row>
</ion-grid>Example: Responsive Grid
<ion-grid>
<ion-row>
<ion-col size="12" size-md="6" size-lg="4">
<div class="box">Responsive Column</div>
</ion-col>
<ion-col size="12" size-md="6" size-lg="4">
<div class="box">Responsive Column</div>
</ion-col>
<ion-col size="12" size-md="6" size-lg="4">
<div class="box">Responsive Column</div>
</ion-col>
</ion-row>
</ion-grid>Example: Grid with Gutters
<ion-grid fixed>
<ion-row>
<ion-col size="4">Column 1</ion-col>
<ion-col size="4">Column 2</ion-col>
<ion-col size="4">Column 3</ion-col>
</ion-row>
</ion-grid>
Note: The
fixed attribute on ion-grid sets a fixed width for the grid container, ensuring consistent layout across devices.
Warning: When using
ion-col with size, make sure the total size across all columns in a row adds up to 12.
2. Creating Grid Rows
| Property | Values | Description |
|---|---|---|
| ion-grid | fixed, fluid |
Sets the grid behavior. fixed uses a fixed width, fluid uses 100% width. |
| ion-row | wrap, nowrap |
Determines whether rows wrap to new lines. Default is wrap. |
| ion-row [align] | start, center, end, stretch, baseline |
Aligns items within the row. Default is stretch. |
Example: Basic Grid Row
<ion-grid>
<ion-row>
<ion-col>Column 1</ion-col>
<ion-col>Column 2</ion-col>
</ion-row>
</ion-grid>Example: Grid Row with Alignment
<ion-grid>
<ion-row align="center">
<ion-col size="6">Centered Column</ion-col>
</ion-row>
</ion-grid>3. Creating Grid Columns
| Property | Values | Description |
|---|---|---|
| ion-col | size, offset, order |
Base component for grid columns |
| size | 1-12, auto, size-lg |
Defines column width at different breakpoints |
| offset | 1-11 |
Offsets column by specified number of units |
| order | 1-12 |
Changes visual order of columns |
Example: Basic Grid Column
<ion-grid>
<ion-row>
<ion-col size="6">Column 1</ion-col>
<ion-col size="6">Column 2</ion-col>
</ion-row>
</ion-grid>Example: Responsive Grid Columns
<ion-grid>
<ion-row>
<ion-col size="12" size-md="6" size-lg="4">
Responsive Column
</ion-col>
</ion-row>
</ion-grid>Example: Column Offset
<ion-grid>
<ion-row>
<ion-col size="3" offset="3">Offset Column</ion-col>
</ion-row>
</ion-grid>4. Setting Column Sizes
| Property | Values | Description |
|---|---|---|
| size | 1-12 |
Defines the width of the column in terms of 12-column grid system |
| offset | 1-11 |
Applies left margin to shift column position |
| pull | 1-11 |
Moves column to the left by specified number of columns |
| push | 1-11 |
Moves column to the right by specified number of columns |
Example: Basic Column Size
<ion-grid>
<ion-row>
<ion-col size="6">Column 1</ion-col>
<ion-col size="6">Column 2</ion-col>
</ion-row>
</ion-grid>Example: Column with Offset
<ion-grid>
<ion-row>
<ion-col size="4" offset="4">Centered Column</ion-col>
</ion-row>
</ion-grid>Example: Responsive Column Sizes
<ion-grid>
<ion-row>
<ion-col size="12" size-md="6" size-lg="4">
Responsive Column
</ion-col>
</ion-row>
</ion-grid>5. Using Responsive Columns
| Property | Description | Values | Notes |
|---|---|---|---|
| ion-col | Base column component | ion-col |
Used to define a column in a grid layout |
| size | Fixed width column | 1-12, auto |
Defines the width of a column in terms of 12-column grid |
| size-sm | Small screen column size | 1-12, auto |
Applies to screens with width < 576px |
| size-md | Medium screen column size | 1-12, auto |
Applies to screens with width < 768px |
| size-lg | Large screen column size | 1-12, auto |
Applies to screens with width < 992px |
| size-xl | Extra-large screen column size | 1-12, auto |
Applies to screens with width < 1200px |
| offset | Column offset | 1-11 |
Pushes column to the right by specified units |
| offset-sm | Small screen column offset | 1-11 |
Applies to screens with width < 576px |
| offset-md | Medium screen column offset | 1-11 |
Applies to screens with width < 768px |
| offset-lg | Large screen column offset | 1-11 |
Applies to screens with width < 992px |
| offset-xl | Extra-large screen column offset | 1-11 |
Applies to screens with width < 1200px |
| pull | Column pull | 1-11 |
Moves column to the left by specified units |
| push | Column push | 1-11 |
Moves column to the right by specified units |
Example: Responsive Column Usage
<ion-grid>
<ion-row>
<ion-col size="12" size-md="6" size-lg="4">
<div>Column 1</div>
</ion-col>
<ion-col size="12" size-md="6" size-lg="4">
<div>Column 2</div>
</ion-col>
<ion-col size="12" size-md="6" size-lg="4">
<div>Column 3</div>
</ion-col>
</ion-row>
</ion-grid>Example: Column with Offset
<ion-grid>
<ion-row>
<ion-col size="12" size-md="4" offset-md="4">
<div>Centered Column</div>
</ion-col>
</ion-row>
</ion-grid>
Note: The
size property is used for all screen sizes by default unless overridden with size-sm, size-md, size-lg, or size-xl.
6. Setting Column Offset
| Property | Values | Description |
|---|---|---|
| offset | 0, 1, ..., 11 |
Number of columns to offset the grid item |
| offsetStart | 0, 1, ..., 11 |
Offset for the start side (LTR: left, RTL: right) |
| offsetEnd | 0, 1, ..., 11 |
Offset for the end side (LTR: right, RTL: left) |
Example: Setting Column Offset
<ion-grid>
<ion-row>
<ion-col size="6">
<div class="box">Column 1</div>
</ion-col>
<ion-col size="6" offset="3">
<div class="box">Column 2 (offset by 3)</div>
</ion-col>
</ion-row>
</ion-grid>Note: The offset property shifts the column to the right (in LTR mode) or left (in RTL mode) by the specified number of columns.
7. Using Push and Pull
| Property | Values | Description |
|---|---|---|
| push | 0 | 1 | 2 | ... |
Pushes the element to the right by specified number of columns |
| pull | 0 | 1 | 2 | ... |
Pulls the element to the left by specified number of columns |
Example: Push and Pull in Ionic Grid
<ion-grid>
<ion-row>
<ion-col push="3">Pushed Column</ion-col>
<ion-col pull="2">Pulled Column</ion-col>
</ion-row>
</ion-grid>8. Aligning Grid Items
| Property | Values | Description |
|---|---|---|
| justify-items | start, end, center, stretch |
Aligns items along the inline axis within their grid cell |
| align-items | start, end, center, stretch |
Aligns items along the block axis within their grid cell |
| place-items | <align-items> / <justify-items> |
Shorthand for align-items and justify-items |
Example: justify-items and align-items
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
justify-items: center;
align-items: center;
}Example: place-items shorthand
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
place-items: center stretch;
}9. Justifying Grid Content
| Property | Values | Description |
|---|---|---|
| justify-content | start, end, center, space-between, space-around, space-evenly |
Aligns grid items along the inline axis (left to right in LTR) |
| align-content | start, end, center, space-between, space-around, space-evenly |
Aligns grid lines along the block axis (top to bottom) |
10. Creating Responsive Layouts
Example: Basic Grid Structure
<ion-grid>
<ion-row>
<ion-col size="6">Column 1</ion-col>
<ion-col size="6">Column 2</ion-col>
</ion-row>
</ion-grid>| Property | Values | Description |
|---|---|---|
| ion-grid | fluid |
Enables fluid layout (default is fixed) |
| ion-row | no-gutters |
Removes gutters between columns |
| ion-col | size, size-sm, size-md, size-lg |
Defines column width at different breakpoints |
Note: Grid system uses 12-column layout by default.