Repository navigation
feat(grid, col): resolve breakpoints from config - #31518
Merged
Merged
Conversation
brandyscarney
added this pull request to stack #31503
October 1, 2026 17:24
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
ShaneK
requested changes
Oct 5, 2026
ShaneK
left a comment
ShaneK
left a comment
Member
There was a problem hiding this comment.
Looks really good overall! Just a couple of things, mainly the grid and col holding onto a stale breakpoint after being removed and re-added, plus the deprecation warning firing once per column. The rest are small.
brandyscarney
force-pushed
the
FW-7285-3-grid-col
branch
from
October 5, 2026 20:00
50bec8b to
f561714
Compare
thetaPC
requested changes
Oct 8, 2026
brandyscarney
force-pushed
the
FW-7285-3-grid-col
branch
from
October 9, 2026 18:00
61b4b9f to
a79c14f
Compare
brandyscarney
force-pushed
the
FW-7285-3-grid-col
branch
from
October 12, 2026 20:43
2dd0921 to
d8940bc
Compare
thetaPC
requested changes
Oct 13, 2026
brandyscarney
force-pushed
the
FW-7285-3-grid-col
branch
from
October 13, 2026 19:08
025e9aa to
ddeed86
Compare
brandyscarney
force-pushed
the
FW-7285-3-grid-col
branch
from
October 13, 2026 19:33
ddeed86 to
7be70a4
Compare
brandyscarney
added a commit
that referenced
this pull request
Oct 14, 2026
Issue number: internal
---------
## What is the current behavior?
The previous PR in this stack added the `screenBreakpoints` config
option and the `@utils/breakpoints` helpers, but nothing consumes them
yet.
`ion-grid` gets its responsive padding and fixed widths purely from
`@media` queries, with the thresholds compiled into the CSS. `ion-col`
only expresses per-breakpoint values through breakpoint-suffixed
properties (`size-xs` through `size-xl`, plus the `order-*` and
`offset-*` equivalents). Neither reads the configured breakpoints, and
neither can target `xxl`.
`ion-grid` also declared its own `ION_GRID_BREAKPOINTS` /
`IonGridBreakpoint` (carrying a `TODO(FW-7285)`) rather than using the
shared type.
## What is the new behavior?
- Grid and column padding and fixed widths now follow the
`screenBreakpoints` config. They change at the configured widths rather
than at thresholds fixed when the framework was built, so moving a
breakpoint moves the layout with it.
- The default fixed widths assume the default thresholds. Lowering a
threshold without lowering its width leaves the grid wider than the
screen, where `max-width: 100%` clamps it and it is no longer fixed. Set
the matching `--ion-grid-breakpoint-*-width` variables alongside the
config.
- `ion-col` accepts an object of breakpoint values for `size`, `order`
and `offset`: `col.size = { xs: 12, md: 6 }`. This is resolved against
the configured breakpoints. `xxl` is added to this object. An empty
string or `null` at a breakpoint resets that column to the default flex
layout.
- All suffixed properties are **deprecated**, but not removed. They
still work and log a deprecation warning. If both forms are set for the
same property, the object form wins and the suffixed ones are ignored
with a warning. They will be removed in a future major release.
- `ION_GRID_BREAKPOINTS` / `IonGridBreakpoint` and `ION_COL_BREAKPOINTS`
/ `IonColBreakpoint` are replaced by the shared `ScreenBreakpoint`.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
The `size`, `order`, and `offset` prop types have been widened from
`string | undefined` to `BreakpointMap<string | number | null> | number
| string | undefined`. The suffixed properties continue to work as
before.
`BREAKING.md` has been updated under 10.x with migration guidance for
these deprecations. The `push`/`pull` entry has also been moved from the
Grid section to Col, where the properties are defined.
## Other information
[Preview](https://ionic-framework-git-fw-7285-3-grid-col-ionic1.vercel.app/src/components/grid/test/breakpoints/)
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue number: internal
What is the current behavior?
The previous PR in this stack added the
screenBreakpointsconfig option and the@utils/breakpointshelpers, but nothing consumes them yet.ion-gridgets its responsive padding and fixed widths purely from@mediaqueries, with the thresholds compiled into the CSS.ion-colonly expresses per-breakpoint values through breakpoint-suffixed properties (size-xsthroughsize-xl, plus theorder-*andoffset-*equivalents). Neither reads the configured breakpoints, and neither can targetxxl.ion-gridalso declared its ownION_GRID_BREAKPOINTS/IonGridBreakpoint(carrying aTODO(FW-7285)) rather than using the shared type.What is the new behavior?
screenBreakpointsconfig. They change at the configured widths rather than at thresholds fixed when the framework was built, so moving a breakpoint moves the layout with it.max-width: 100%clamps it and it is no longer fixed. Set the matching--ion-grid-breakpoint-*-widthvariables alongside the config.ion-colaccepts an object of breakpoint values forsize,orderandoffset:col.size = { xs: 12, md: 6 }. This is resolved against the configured breakpoints.xxlis added to this object. An empty string ornullat a breakpoint resets that column to the default flex layout.ION_GRID_BREAKPOINTS/IonGridBreakpointandION_COL_BREAKPOINTS/IonColBreakpointare replaced by the sharedScreenBreakpoint.Does this introduce a breaking change?
The
size,order, andoffsetprop types have been widened fromstring | undefinedtoBreakpointMap<string | number | null> | number | string | undefined. The suffixed properties continue to work as before.BREAKING.mdhas been updated under 10.x with migration guidance for these deprecations. Thepush/pullentry has also been moved from the Grid section to Col, where the properties are defined.Other information
Preview