Grid - Breakpoints

Configured breakpoints: xs 0, sm 200, md 400, lg 600, xl 800, xxl 1000. Resize the window to step through them.

Responsive padding

ion-col
ion-col

Fixed width

The default fixed widths (540px at sm, up to 1320px at xxl) are sized for the default thresholds. Moving the thresholds down without also moving these widths would leave the grid wider than the screen, where max-width: 100% clamps it, so they are overridden to match.

ion-grid[fixed]

Responsive column sizes

Each column spans xs 12, sm 6, md 4, lg 3, xl 2, xxl 1 of the 12 column grid, so the row goes from one column per line to twelve as the screen grows.

1
2
3
4
5
6
7
8
9
10
11
12
… –px