grid组件的响应式格栅在特定条件下会有样式冲突

[cjanyl]

trafficstars

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.2.5

Environment

vue v3.4.27

Reproduction link

https://www.antdv.com/components/grid-cn

Steps to reproduce

let columns = [1, 2, 3, 4, 5, 6, 7, 8]

<a-row :gutter="[{sm: 32, xl: 64}, 12]" :wrap="true">
<a-col :xs="24" :sm="24" :md="12" :xl="8" :xxl="6" v-for="column in columns" :key="column">
{{ column }}
</a-col>

<a-col :xs="{span: 24, offset: 0}" :sm="{span: 24, offset: 0}" :md="{span: 12, offset: 12 - columns.length % 2}"
:xl="{span: 8, offset: 16 - columns.length % 3 * 8}" :xxl="{span: 6, offset: 18 - columns.length % 4 * 6}">
<a-flex :gap="8" justify="end">
按钮所在位置
</a-flex>
</a-col>
</a-row>

当columns的length为8，并且页面宽度在1200-1600之间时，样式： @media (min-width: 1200px) { .ant-col-xl-offset-0 { margin-inline-end: 0; } } 的效果，会被样式： @media (min-width: 768px) { :where(.css-dev-only-do-not-override-3yk6yf).ant-col-md-offset-12 { margin-inline-start: 50%; } } 的效果影响。

What is expected?

页面宽度命中1200-1600时，按钮所在位置的col，在当前行的最后。offset为0生效。

What is actually happening?

页面宽度命中1200-1600时，按钮所在位置的col，在当前行的中间偏右侧。offset=12生效，offset=0未生效。

---

当前功能是为了渲染搜索表单，通过传参渲染列，如果行被占满，则搜索按钮新起一行并靠右侧显示。如果未被占满，则在最后一行靠右显示。内部项目，无重现链接。