# ion-grid
URL: https://ionicframework.com/docs/api/grid
**Encapsulation**: [shadow](/docs/reference/glossary.md#shadow)
The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](/docs/api/row.md) and [column(s)](/docs/api/col.md). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
## Overview
- Grids act as a container for all rows and columns. Grids take up the full width of their container, but adding the `fixed` property will set the width based on the screen size, refer to [Fixed Grid](#fixed-grid) below.
- Rows are horizontal groups of columns that line the columns up properly.
- Content should be placed within columns, and only columns may be immediate children of rows.
- The `size` property indicates the number of columns to use out of the default 12 per row. So, `size="4"` can be added to a column in order to take up 1/3 of the grid, or 4 of the 12 columns.
- Columns without a value for size will automatically have equal widths. For example, four columns will each automatically be 25% wide.
- Column widths are set as a percentage, so they're always fluid and sized relative to their parent element.
- There is padding between individual columns. However, the padding can be removed from the grid and columns by adding the `ion-no-padding` class to the grid. Refer to the [CSS Utilities](/docs/layout/css-utilities.md) for more styles that can be applied to the grid.
- There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
- Grid tiers are based on minimum widths, meaning they apply to their tier and all those larger than them (e.g., `size-sm="4"` applies to small, medium, large, and extra large devices).
- Grids can be customized via CSS variables. Refer to [Customizing the Grid](#customizing-the-grid).
## Default Breakpoints
The default breakpoints for the grid and the corresponding properties are defined in the table below. Breakpoint values can not be customized at this time. For more information on why they can't be customized, refer to [Variables in Media Queries](/docs/theming/advanced.md#variables-in-media-queries).
| Name | Value | Width Property | Offset Property | Push Property | Pull Property | Description |
| --- | --- | --- | --- | --- | --- | --- |
| xs | 0 | `size` | `offset` | `push` | `pull` | Set columns when (min-width: 0) |
| sm | 576px | `sizeSm` | `offsetSm` | `pushSm` | `pullSm` | Set columns when (min-width: 576px) |
| md | 768px | `sizeMd` | `offsetMd` | `pushMd` | `pullMd` | Set columns when (min-width: 768px) |
| lg | 992px | `sizeLg` | `offsetLg` | `pushLg` | `pullLg` | Set columns when (min-width: 992px) |
| xl | 1200px | `sizeXl` | `offsetXl` | `pushXl` | `pullXl` | Set columns when (min-width: 1200px) |
## Basic Usage
By default, columns will take up equal width inside of a row for all devices and screen sizes.
**JavaScript**
```html
1
2
3
1
2
3
4
5
6
1
2
3
4
5
6
7
8
9
10
11
12
```
**Angular**
`src/app/example.component.html`
```html
1
2
3
1
2
3
4
5
6
1
2
3
4
5
6
7
8
9
10
11
12
```
`src/app/example.component.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonCol, IonGrid, IonRow } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonCol, IonGrid, IonRow],
})
export class ExampleComponent {}
```
**React**
`src/main.tsx`
```tsx
import React from 'react';
import { IonCol, IonGrid, IonRow } from '@ionic/react';
import './main.css';
function Example() {
return (
<>
1
2
3
1
2
3
4
5
6
1
2
3
4
5
6
7
8
9
10
11
12
);
}
export default Example;
```
`src/main.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
**Vue**
```html
1
2
3
1
2
3
4
5
6
1
2
3
4
5
6
7
8
9
10
11
12
```
## Fixed Grid
Grids take up 100% width of their container. By adding the `fixed` property to the grid, the width will be set based on the screen size. The width of the grid for each breakpoint is listed in the table below, but it can be customized. For more information, refer to [Customizing the Grid](#customizing-the-grid). Open the below example in StackBlitz and resize the screen to observe how the grid width changes.
| Name | Value | Description |
| --- | --- | --- |
| xs | 100% | Width is 100% for xs screens |
| sm | 540px | Set grid width to 540px when (min-width: 576px) |
| md | 720px | Set grid width to 720px when (min-width: 768px) |
| lg | 960px | Set grid width to 960px when (min-width: 992px) |
| xl | 1140px | Set grid width to 1140px when (min-width: 1200px) |
**JavaScript**
```html
1
2
3
```
**Angular**
`src/app/example.component.html`
```html
1
2
3
```
`src/app/example.component.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonCol, IonGrid, IonRow } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonCol, IonGrid, IonRow],
})
export class ExampleComponent {}
```
**React**
`src/main.tsx`
```tsx
import React from 'react';
import { IonCol, IonGrid, IonRow } from '@ionic/react';
import './main.css';
function Example() {
return (
1
2
3
);
}
export default Example;
```
`src/main.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
**Vue**
```html
1
2
3
```
## Column Size
Columns can be set to specific sizes to take up a certain number out of the total number of columns, or resize their width based on the content. The default number of columns is 12, but this can be customized. Refer to the [Number of Columns](#number-of-columns) section below for more information.
### Content-based size
By setting the `size` to `"auto"` the column can size itself based on the natural width of its content. This is necessary when setting a column to an absolute width, such as a specific number of pixels. The columns next to the auto-width column will resize to fill the row.
**JavaScript**
```html
Column 1 has size set to "auto"
1
2
3
Column 3 contains an input and has size set to "auto"
1
2
4
5
6
Column 2 has size set to "auto" and a defined width
1
2
```
**Angular**
`src/app/example.component.html`
```html
Column 1 has size set to "auto"
1
2
3
Column 3 contains an input and has size set to "auto"
1
2
4
5
6
Column 2 has size set to "auto" and a defined width
1
2
```
`src/app/example.component.css`
```css
ion-col {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
}
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonCol, IonGrid, IonInput, IonRow } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonCol, IonGrid, IonInput, IonRow],
})
export class ExampleComponent {}
```
**React**
`src/main.tsx`
```tsx
import React from 'react';
import { IonCol, IonGrid, IonInput, IonRow } from '@ionic/react';
import './main.css';
function Example() {
return (
<>
Column 1 has size set to "auto"
1
2
3
Column 3 contains an input and has size set to "auto"
1
2
4
5
6
Column 2 has size set to "auto" and a defined width
1
2
);
}
export default Example;
```
`src/main.css`
```css
ion-col {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
}
```
**Vue**
```html
Column 1 has size set to "auto"
1
2
3
Column 3 contains an input and has size set to "auto"
1
2
4
5
6
Column 2 has size set to "auto" and a defined width
1
2
```
### Specified size
Set the `size` of a column and the others will automatically resize around it. If a size is specified on all of the columns and it doesn't add up to the total number of columns, there will be empty space after the columns.
**JavaScript**
```html
Column 2 has size set to "8"
1
2
3
Columns 3 & 4 have size set to "3"
1
2
3
4
5
6
Columns 1 & 2 have size set to "4"
1
2
```
**Angular**
`src/app/example.component.html`
```html
Column 2 has size set to "8"
1
2
3
Columns 3 & 4 have size set to "3"
1
2
3
4
5
6
Columns 1 & 2 have size set to "4"
1
2
```
`src/app/example.component.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonCol, IonGrid, IonRow } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonCol, IonGrid, IonRow],
})
export class ExampleComponent {}
```
**React**
`src/main.tsx`
```tsx
import React from 'react';
import { IonCol, IonGrid, IonRow } from '@ionic/react';
import './main.css';
function Example() {
return (
<>
Column 2 has size set to "8"
1
2
3
Columns 3 & 4 have size set to "3"
1
2
3
4
5
6
Columns 1 & 2 have size set to "4"
1
2
);
}
export default Example;
```
`src/main.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
**Vue**
```html
Column 2 has size set to "8"
1
2
3
Columns 3 & 4 have size set to "3"
1
2
3
4
5
6
Columns 1 & 2 have size set to "4"
1
2
```
### Responsive size
The `size` property will change the column width for all [breakpoints](#default-breakpoints). Column also provides several size properties with the breakpoint name appended to the end of "size". These properties can be used to change the width of the column based on the screen size. Open the below example in StackBlitz and resize the screen to observe how the column widths change.
**JavaScript**
```html
Stacked for xs breakpoint, equal width for sm and up
1
2
3
4
Equal width until md breakpoint, last column takes full width for md and up
1
2
3
2 per row until md breakpoint, 3 per row for md, equal width for lg and up
1
2
3
4
5
6
```
**Angular**
`src/app/example.component.html`
```html
Stacked for xs breakpoint, equal width for sm and up
1
2
3
4
Equal width until md breakpoint, last column takes full width for md and up
1
2
3
2 per row until md breakpoint, 3 per row for md, equal width for lg and up
1
2
3
4
5
6
```
`src/app/example.component.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonCol, IonGrid, IonRow } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonCol, IonGrid, IonRow],
})
export class ExampleComponent {}
```
**React**
`src/main.tsx`
```tsx
import React from 'react';
import { IonCol, IonGrid, IonRow } from '@ionic/react';
import './main.css';
function Example() {
return (
<>
Stacked for xs breakpoint, equal width for sm and up
1
2
3
4
Equal width until md breakpoint, last column takes full width for md and up
1
2
3
2 per row until md breakpoint, 3 per row for md, equal width for lg and up
1
2
3
4
5
6
);
}
export default Example;
```
`src/main.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
**Vue**
```html
Stacked for xs breakpoint, equal width for sm and up
1
2
3
4
Equal width until md breakpoint, last column takes full width for md and up
1
2
3
2 per row until md breakpoint, 3 per row for md, equal width for lg and up
1
2
3
4
5
6
```
## Column Offset
Columns can be offset to shift to the right by a certain number of columns out of the total number of columns.
### Specified offset
Columns can be moved to the right by using the `offset` property. This property increases the left margin of the column by the number of specified columns. It also shifts the columns to the right of it, if any exist.
**JavaScript**
```html
Column 2 has offset set to "3"
1
2
3
Column 5 has offset set to "2"
1
2
3
4
5
Column 1 has offset set to "4"
1
2
```
**Angular**
`src/app/example.component.html`
```html
Column 2 has offset set to "3"
1
2
3
Column 5 has offset set to "2"
1
2
3
4
5
Column 1 has offset set to "4"
1
2
```
`src/app/example.component.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonCol, IonGrid, IonRow } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonCol, IonGrid, IonRow],
})
export class ExampleComponent {}
```
**React**
`src/main.tsx`
```tsx
import React from 'react';
import { IonCol, IonGrid, IonRow } from '@ionic/react';
import './main.css';
function Example() {
return (
<>
Column 2 has offset set to "3"
1
2
3
Column 5 has offset set to "2"
1
2
3
4
5
Column 1 has offset set to "4"
1
2
);
}
export default Example;
```
`src/main.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
**Vue**
```html
Column 2 has offset set to "3"
1
2
3
Column 5 has offset set to "2"
1
2
3
4
5
Column 1 has offset set to "4"
1
2
```
### Responsive offset
The `offset` property will change the column's left margin for all [breakpoints](#default-breakpoints). Column also provides several offset properties with the breakpoint name appended to the end of "offset". These properties can be used to change the offset of the column based on the screen size. Open the below example in StackBlitz and resize the screen to observe how the column offsets change.
**JavaScript**
```html
No offset for xs breakpoint, offset 1st column for sm and up
1
2
3
4
5
No offset for xs breakpoint, offset last 3 columns for md and up
1
2
3
4
Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up
1
2
```
**Angular**
`src/app/example.component.html`
```html
No offset for xs breakpoint, offset 1st column for sm and up
1
2
3
4
5
No offset for xs breakpoint, offset last 3 columns for md and up
1
2
3
4
Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up
1
2
```
`src/app/example.component.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonCol, IonGrid, IonRow } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonCol, IonGrid, IonRow],
})
export class ExampleComponent {}
```
**React**
`src/main.tsx`
```tsx
import React from 'react';
import { IonCol, IonGrid, IonRow } from '@ionic/react';
import './main.css';
function Example() {
return (
<>
No offset for xs breakpoint, offset 1st column for sm and up
1
2
3
4
5
No offset for xs breakpoint, offset last 3 columns for md and up
1
2
3
4
Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up
1
2
);
}
export default Example;
```
`src/main.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
**Vue**
```html
No offset for xs breakpoint, offset 1st column for sm and up
1
2
3
4
5
No offset for xs breakpoint, offset last 3 columns for md and up
1
2
3
4
Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up
1
2
```
## Column Push & Pull
Columns can be pushed to to the right or pulled to the left by a certain number of columns out of the total number of columns.
### Specified push & pull
Reorder the columns by adding the `push` and `pull` properties. These properties adjust the `left` and `right` of the columns by the specified number of columns making it easy to reorder columns. This will cause columns to overlap if they are shifted to where another column is positioned.
**JavaScript**
```html
Column 1 has push set to "4" and column 2 has pull set to "4"
1
2
3
Column 2 has push set to "4" and column 3 & 4 have pull set to
"2"
1
2
3
4
5
6
Column 1 has push set to "3" and column 2 has pull set to "9"
1
2
```
**Angular**
`src/app/example.component.html`
```html
Column 1 has push set to "4" and column 2 has pull set to "4"
1
2
3
Column 2 has push set to "4" and column 3 & 4 have pull set to
"2"
1
2
3
4
5
6
Column 1 has push set to "3" and column 2 has pull set to "9"
1
2
```
`src/app/example.component.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonCol, IonGrid, IonRow } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonCol, IonGrid, IonRow],
})
export class ExampleComponent {}
```
**React**
`src/main.tsx`
```tsx
import React from 'react';
import { IonCol, IonGrid, IonRow } from '@ionic/react';
import './main.css';
function Example() {
return (
<>
Column 1 has push set to "4" and column 2 has pull set to{' '}
"4"
1
2
3
Column 2 has push set to "4" and column 3 & 4 have pull set to{' '}
"2"
1
2
3
4
5
6
Column 1 has push set to "3" and column 2 has pull set to{' '}
"9"
1
2
);
}
export default Example;
```
`src/main.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
**Vue**
```html
Column 1 has push set to "4" and column 2 has pull set to
"4"
1
2
3
Column 2 has push set to "4" and column 3 & 4 have pull set to
"2"
1
2
3
4
5
6
Column 1 has push set to "3" and column 2 has pull set to
"9"
1
2
```
### Responsive push & pull
The `push` and `pull` properties will change the column's position for all [breakpoints](#default-breakpoints). Column also provides several `push` and `pull` properties with the breakpoint name appended to the end of "push" / "pull". These properties can be used to change the position of the column based on the screen size. Open the below example in StackBlitz and resize the screen to observe how the column positions change.
**JavaScript**
```html
No change for xs breakpoint, push 1st column & pull 2nd column for sm and up
1
2
No change for xs breakpoint, push middle columns & pull last column for md and up
1
2
3
4
Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up
1
2
3
4
5
6
```
**Angular**
`src/app/example.component.html`
```html
No change for xs breakpoint, push 1st column & pull 2nd column for sm and up
1
2
No change for xs breakpoint, push middle columns & pull last column for md and up
1
2
3
4
Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up
1
2
3
4
5
6
```
`src/app/example.component.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonCol, IonGrid, IonRow } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonCol, IonGrid, IonRow],
})
export class ExampleComponent {}
```
**React**
`src/main.tsx`
```tsx
import React from 'react';
import { IonCol, IonGrid, IonRow } from '@ionic/react';
import './main.css';
function Example() {
return (
<>
No change for xs breakpoint, push 1st column & pull 2nd column for sm and up
1
2
No change for xs breakpoint, push middle columns & pull last column for md and up
1
2
3
4
Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up
1
2
3
4
5
6
);
}
export default Example;
```
`src/main.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
**Vue**
```html
No change for xs breakpoint, push 1st column & pull 2nd column for sm and up
1
2
No change for xs breakpoint, push middle columns & pull last column for md and up
1
2
3
4
Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up
1
2
3
4
5
6
```
## Alignment
### Vertical Alignment
All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, refer to [css utilities](/docs/layout/css-utilities.md#flex-container-properties).
**JavaScript**
```html
Columns aligned at the top
1
2
3
4
#
#
#
Columns aligned at the center
1
2
3
4
#
#
#
Columns aligned at the bottom
1
2
3
4
#
#
#
```
**Angular**
`src/app/example.component.html`
```html
Columns aligned at the top
1
2
3
4
#
#
#
Columns aligned at the center
1
2
3
4
#
#
#
Columns aligned at the bottom
1
2
3
4
#
#
#
```
`src/app/example.component.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonCol, IonGrid, IonRow } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonCol, IonGrid, IonRow],
})
export class ExampleComponent {}
```
**React**
`src/main.tsx`
```tsx
import React from 'react';
import { IonCol, IonGrid, IonRow } from '@ionic/react';
import './main.css';
function Example() {
return (
<>
Columns aligned at the top
1
2
3
4
#
#
#
Columns aligned at the center
1
2
3
4
#
#
#
Columns aligned at the bottom
1
2
3
4
#
#
#
);
}
export default Example;
```
`src/main.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
**Vue**
```html
Columns aligned at the top
1
2
3
4
#
#
#
Columns aligned at the center
1
2
3
4
#
#
#
Columns aligned at the bottom
1
2
3
4
#
#
#
```
### Horizontal Alignment
All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, refer to [css utilities](/docs/layout/css-utilities.md#flex-container-properties).
**JavaScript**
```html
Columns aligned at the start
1
2
Columns aligned at the center
1
2
Columns aligned at the end
1
2
Columns aligned with space around
1
2
Columns aligned with space between
1
2
```
**Angular**
`src/app/example.component.html`
```html
Columns aligned at the start
1
2
Columns aligned at the center
1
2
Columns aligned at the end
1
2
Columns aligned with space around
1
2
Columns aligned with space between
1
2
```
`src/app/example.component.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonCol, IonGrid, IonRow } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonCol, IonGrid, IonRow],
})
export class ExampleComponent {}
```
**React**
`src/main.tsx`
```tsx
import React from 'react';
import { IonCol, IonGrid, IonRow } from '@ionic/react';
import './main.css';
function Example() {
return (
<>
Columns aligned at the start
1
2
Columns aligned at the center
1
2
Columns aligned at the end
1
2
Columns aligned with space around
1
2
Columns aligned with space between
1
2
);
}
export default Example;
```
`src/main.css`
```css
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
**Vue**
```html
Columns aligned at the start
1
2
Columns aligned at the center
1
2
Columns aligned at the end
1
2
Columns aligned with space around
1
2
Columns aligned with space between
1
2
```
## Customizing the Grid
Using our built-in CSS variables, it's possible to customize the predefined grid attributes. Change the values of the padding, the number of columns, and more.
### Fixed Width
The width of a fixed grid can be set for all breakpoints with the `--ion-grid-width` CSS variable. To override individual breakpoints, use the `--ion-grid-width-{breakpoint}` CSS variables. The default value for each of the breakpoints can be found in the [Fixed Grid](#fixed-grid) section. Open the below example in StackBlitz and resize the screen to observe how the grid width changes.
**JavaScript**
```html
1
2
3
```
**Angular**
`src/app/example.component.html`
```html
1
2
3
```
`src/app/example.component.css`
```css
ion-grid {
--ion-grid-width: 50%;
--ion-grid-width-xs: 50%;
--ion-grid-width-sm: 288px;
--ion-grid-width-md: 384px;
--ion-grid-width-lg: 480px;
--ion-grid-width-xl: 570px;
}
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonCol, IonGrid, IonRow } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonCol, IonGrid, IonRow],
})
export class ExampleComponent {}
```
**React**
`src/main.tsx`
```tsx
import React from 'react';
import { IonCol, IonGrid, IonRow } from '@ionic/react';
import './main.css';
function Example() {
return (
1
2
3
);
}
export default Example;
```
`src/main.css`
```css
ion-grid {
--ion-grid-width: 50%;
--ion-grid-width-xs: 50%;
--ion-grid-width-sm: 288px;
--ion-grid-width-md: 384px;
--ion-grid-width-lg: 480px;
--ion-grid-width-xl: 570px;
}
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
**Vue**
```html
1
2
3
```
### Number of Columns
The number of grid columns can be modified with the `--ion-grid-columns` CSS variable. By default there are 12 grid columns, but this can be changed to any positive integer and be used to calculate the width of each individual column.
**JavaScript**
```html
Total number of columns is set to 6, column size is set to 1
1
2
3
4
```
**Angular**
`src/app/example.component.html`
```html
Total number of columns is set to 6, column size is set to 1
1
2
3
4
```
`src/app/example.component.css`
```css
ion-grid {
--ion-grid-columns: 6;
}
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonCol, IonGrid, IonRow } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonCol, IonGrid, IonRow],
})
export class ExampleComponent {}
```
**React**
`src/main.tsx`
```tsx
import React from 'react';
import { IonCol, IonGrid, IonRow } from '@ionic/react';
import './main.css';
function Example() {
return (
<>
Total number of columns is set to 6, column size is set to 1
1
2
3
4
);
}
export default Example;
```
`src/main.css`
```css
ion-grid {
--ion-grid-columns: 6;
}
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
**Vue**
```html
Total number of columns is set to 6, column size is set to 1
1
2
3
4
```
### Padding
The padding on the grid container can be set for all breakpoints with the `--ion-grid-padding` CSS variable. To override individual breakpoints, use the `--ion-grid-padding-{breakpoint}` CSS variables.
The padding on the columns can be set for all breakpoints with the `--ion-grid-column-padding` CSS variable. To override individual breakpoints, use the `--ion-grid-column-padding-{breakpoint}` CSS variables.
**JavaScript**
```html
1
2
3
```
**Angular**
`src/app/example.component.html`
```html
1
2
3
```
`src/app/example.component.css`
```css
ion-grid {
--ion-grid-padding: 20px;
--ion-grid-padding-xs: 20px;
--ion-grid-padding-sm: 20px;
--ion-grid-padding-md: 20px;
--ion-grid-padding-lg: 20px;
--ion-grid-padding-xl: 20px;
--ion-grid-column-padding: 30px;
--ion-grid-column-padding-xs: 30px;
--ion-grid-column-padding-sm: 30px;
--ion-grid-column-padding-md: 30px;
--ion-grid-column-padding-lg: 30px;
--ion-grid-column-padding-xl: 30px;
}
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonCol, IonGrid, IonRow } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonCol, IonGrid, IonRow],
})
export class ExampleComponent {}
```
**React**
`src/main.tsx`
```tsx
import React from 'react';
import { IonCol, IonGrid, IonRow } from '@ionic/react';
import './main.css';
function Example() {
return (
<>
1
2
3
);
}
export default Example;
```
`src/main.css`
```css
ion-grid {
--ion-grid-padding: 20px;
--ion-grid-padding-xs: 20px;
--ion-grid-padding-sm: 20px;
--ion-grid-padding-md: 20px;
--ion-grid-padding-lg: 20px;
--ion-grid-padding-xl: 20px;
--ion-grid-column-padding: 30px;
--ion-grid-column-padding-xs: 30px;
--ion-grid-column-padding-sm: 30px;
--ion-grid-column-padding-md: 30px;
--ion-grid-column-padding-lg: 30px;
--ion-grid-column-padding-xl: 30px;
}
ion-col {
background-color: #135d54;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
```
**Vue**
```html
1
2
3
```
## Properties
### fixed
**Description**: If `true`, the grid will have a fixed width based on the screen size.
**Attribute**: `fixed`
**Type**: `boolean`
**Default**: `false`
## Events
No events available for this component.
## Methods
No public methods available for this component.
## CSS Shadow Parts
No CSS shadow parts available for this component.
## CSS Custom Properties
| Name | Description |
| --- | --- |
| `--ion-grid-padding` | Padding for the Grid |
| `--ion-grid-padding-lg` | Padding for the Grid on lg screens |
| `--ion-grid-padding-md` | Padding for the Grid on md screens |
| `--ion-grid-padding-sm` | Padding for the Grid on sm screens |
| `--ion-grid-padding-xl` | Padding for the Grid on xl screens |
| `--ion-grid-padding-xs` | Padding for the Grid on xs screens |
| `--ion-grid-width` | Width of the fixed Grid |
| `--ion-grid-width-lg` | Width of the fixed Grid on lg screens |
| `--ion-grid-width-md` | Width of the fixed Grid on md screens |
| `--ion-grid-width-sm` | Width of the fixed Grid on sm screens |
| `--ion-grid-width-xl` | Width of the fixed Grid on xl screens |
| `--ion-grid-width-xs` | Width of the fixed Grid on xs screens |
## Slots
| Name | Description |
| --- | --- |
| | The default slot |