Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Row

ion-row, [ion-row]

Improve this doc

Rows are horizontal components of the grid system and contain varying numbers of columns. They ensure the columns are positioned properly.

Row attributes

By default, columns will stretch to fill the entire height of the row and wrap when necessary. There are several attributes that can be added to a row to customize this behavior.

Property Description
nowrap Adds flex-wrap: nowrap. Forces the columns to a single row.
wrap-reverse Adds flex-wrap: wrap-reverse. The columns will wrap in reverse.
align-items-start Adds align-items: flex-start. All columns will be vertically aligned at the top, unless they specify their own alignment.
align-items-center Adds align-items: center. All columns will be vertically aligned in the center, unless they specify their own alignment.
align-items-end Adds align-items: flex-end. All columns will be vertically aligned at the bottom, unless they specify their own alignment.
align-items-stretch Adds align-items: stretch. All columns will be stretched to take up the entire height of the row, unless they specify their own alignment.
align-items-baseline Adds align-items: baseline. All columns will be vertically aligned at their baselines, unless they specify their own alignment.
justify-content-start Adds justify-content: start. All columns will be horizontally aligned at the start.
justify-content-center Adds justify-content: center. All columns will be horizontally aligned at the center.
justify-content-end Adds justify-content: end. All columns will be horizontally aligned at the end.
justify-content-around Adds justify-content: space-around. All columns will be horizontally aligned with equal space around them.
justify-content-between Adds justify-content: space-between. All columns will be horizontally aligned with a half-size space on either end.

Sass Variables

All

Property Default Description
$grid-breakpoints ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px )

The minimum dimensions at which your layout will change, adapting to different screen sizes, for use in media queries

$grid-max-widths ( sm: 540px, md: 720px, lg: 960px, xl: 1140px )

Maximum width of the grid for different screen sizes

$grid-columns 12

Number of columns for the grid

$grid-padding-width 10px

Total width of the padding for the grid

$grid-padding-widths ( xs: $grid-padding-width, sm: $grid-padding-width, md: $grid-padding-width, lg: $grid-padding-width, xl: $grid-padding-width )

Padding for the columns for different screen sizes

API

Native

General