feat(Grid): add xxxl (1920px) breakpoint for FHD screen (#56825)

* feat(Grid): add xxxl (1840px) breakpoint for FHD screen * feat: update xxxl breakpoint from 1840px to 1920px for layout and list components * feat(Grid): update xxxl breakpoint from 2000px to 1920px for responsive layout * fix(Grid): 修正栅格间隔描述中的拼写错误 * feat(Grid): reverse * test(Form): update grid * size limit --------- Co-authored-by: thinkasany <480968828@qq.com>
2026-02-09 02:49:18 +08:00 · 2026-02-04 00:01:55 +08:00
parent 8d925cbb02
commit f44ec04609
21 changed files with 109 additions and 69 deletions
--- a/components/_util/responsiveObserver.ts
+++ b/components/_util/responsiveObserver.ts
@@ -3,12 +3,14 @@ import React from 'react';
 import type { GlobalToken } from '../theme/internal';
 import { useToken } from '../theme/internal';

-export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+export const responsiveArray = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'] as const;
+export const responsiveArrayReversed = [...responsiveArray].reverse();
+
+export type Breakpoint = (typeof responsiveArray)[number];
 export type BreakpointMap = Record<Breakpoint, string>;
 export type ScreenMap = Partial<Record<Breakpoint, boolean>>;
 export type ScreenSizeMap = Partial<Record<Breakpoint, number>>;

-export const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
 type SubscribeFunc = (screens: ScreenMap) => void;

 const getResponsiveMap = (token: GlobalToken): BreakpointMap => ({
@@ -18,6 +20,7 @@ const getResponsiveMap = (token: GlobalToken): BreakpointMap => ({
  lg: `(min-width: ${token.screenLG}px)`,
  xl: `(min-width: ${token.screenXL}px)`,
  xxl: `(min-width: ${token.screenXXL}px)`,
+  xxxl: `(min-width: ${token.screenXXXL}px)`,
 });

 /**
--- a/components/avatar/Avatar.tsx
+++ b/components/avatar/Avatar.tsx
@@ -114,7 +114,7 @@ const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>((props, ref) => {
  const size = useSize((ctxSize) => customSize ?? avatarCtx?.size ?? ctxSize ?? 'medium');

  const needResponsive = Object.keys(typeof size === 'object' ? size || {} : {}).some((key) =>
-    ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key),
+    responsiveArray.includes(key as Breakpoint),
  );
  const screens = useBreakpoint(needResponsive);
  const responsiveSizeStyle = React.useMemo<React.CSSProperties>(() => {
--- a/components/descriptions/constant.ts
+++ b/components/descriptions/constant.ts
@@ -1,6 +1,7 @@
 import type { Breakpoint } from '../_util/responsiveObserver';

 const DEFAULT_COLUMN_MAP: Record<Breakpoint, number> = {
+  xxxl: 4,
  xxl: 3,
  xl: 3,
  lg: 3,
--- a/components/form/FormItemInput.tsx
+++ b/components/form/FormItemInput.tsx
@@ -4,6 +4,7 @@ import { get, set } from '@rc-component/util';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import { clsx } from 'clsx';

+import { responsiveArrayReversed } from '../_util/responsiveObserver';
 import type { ColProps } from '../grid/col';
 import Col from '../grid/col';
 import { FormContext, FormItemPrefixContext } from './context';
@@ -68,7 +69,7 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = (pr
  const mergedWrapperCol = React.useMemo(() => {
    let mergedWrapper: ColProps = { ...(wrapperCol || formContext.wrapperCol || {}) };
    if (label === null && !labelCol && !wrapperCol && formContext.labelCol) {
-      const list = [undefined, 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;
+      const list = [undefined, ...responsiveArrayReversed] as const;

      list.forEach((size) => {
        const _size = size ? [size] : [];
--- a/components/form/tests/index.test.tsx
+++ b/components/form/tests/index.test.tsx
@@ -1,6 +1,7 @@
 import type { ChangeEventHandler } from 'react';
 import React, { version as ReactVersion, useEffect, useRef, useState } from 'react';
 import { AlertFilled } from '@ant-design/icons';
+import { responsiveArrayReversed } from 'antd/es/_util/responsiveObserver';
 import type { ColProps } from 'antd/es/grid';
 import { clsx } from 'clsx';
 import scrollIntoView from 'scroll-into-view-if-needed';
@@ -23,12 +24,12 @@ import type { InputProps } from '../../input';
 import InputNumber from '../../input-number';
 import zhCN from '../../locale/zh_CN';
 import Modal from '../../modal';
+import Popover from '../../popover';
 import Radio from '../../radio';
+import Segmented from '../../segmented';
 import Select from '../../select';
 import Slider from '../../slider';
 import Switch from '../../switch';
-import Popover from '../../popover';
-import Segmented from '../../segmented';
 import TreeSelect from '../../tree-select';
 import Upload from '../../upload';
 import type { NamePath } from '../interface';
@@ -1442,7 +1443,7 @@ describe('Form', () => {
    expect(twoItem).toHaveClass('ant-col-14 ant-col-offset-4');

    // more size
-    const list = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;
+    const list = responsiveArrayReversed;
    list.forEach((size) => {
      const { container } = render(
        <Form labelCol={{ [size]: { span: 4 } }} wrapperCol={{ span: 14 }}>
@@ -1491,7 +1492,7 @@ describe('Form', () => {
    expect(twoItem?.className.includes('offset')).toBeFalsy();

    // more size
-    const list = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;
+    const list = responsiveArrayReversed;
    list.forEach((size) => {
      const { container } = render(
        <Form labelCol={{ [size]: { span: 24 } }} wrapperCol={{ span: 24 }}>
--- a/components/grid/tests/index.test.tsx
+++ b/components/grid/tests/index.test.tsx
@@ -168,6 +168,7 @@ describe('Grid', () => {
      lg: false,
      xl: false,
      xxl: false,
+      xxxl: false,
    });
  });

--- a/components/grid/col.tsx
+++ b/components/grid/col.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { clsx } from 'clsx';

+import { responsiveArrayReversed } from '../_util/responsiveObserver';
 import type { Breakpoint } from '../_util/responsiveObserver';
 import type { LiteralUnion } from '../_util/type';
 import { ConfigContext } from '../config-provider';
@@ -54,8 +55,6 @@ function parseFlex(flex: FlexType): string {
  return flex;
 }

-const sizes = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;
-
 const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
  const { getPrefixCls, direction } = React.useContext(ConfigContext);
  const { gutter, wrap } = React.useContext(RowContext);
@@ -85,7 +84,7 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
  const sizeStyle: Record<string, string> = {};

  let sizeClassObj: Record<string, boolean | ColSpanType> = {};
-  sizes.forEach((size) => {
+  responsiveArrayReversed.forEach((size) => {
    let sizeProps: ColSize = {};
    const propSize = props[size];
    if (typeof propSize === 'number') {
--- a/components/grid/demo/responsive.md
+++ b/components/grid/demo/responsive.md
@@ -1,7 +1,7 @@
 ## zh-CN

-参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设六个响应尺寸：`xs` `sm` `md` `lg` `xl` `xxl`。
+参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设七个响应尺寸：`xs` `sm` `md` `lg` `xl` `xxl` `xxxl`。

 ## en-US

-Referring to the Bootstrap [responsive design](http://getbootstrap.com/css/#grid-media-queries), here preset six dimensions: `xs` `sm` `md` `lg` `xl` `xxl`.
+Referring to the Bootstrap [responsive design](http://getbootstrap.com/css/#grid-media-queries), here preset seven dimensions: `xs` `sm` `md` `lg` `xl` `xxl` `xxxl`.
--- a/components/grid/hooks/useGutter.ts
+++ b/components/grid/hooks/useGutter.ts
@@ -19,6 +19,7 @@ export default function useGutter(
    lg: true,
    xl: true,
    xxl: true,
+    xxxl: true,
  };

  normalizedGutter.forEach((g, index) => {
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@@ -62,9 +62,9 @@ If the Ant Design grid layout component does not meet your needs, you can use th

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 |
+| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 |
 | gutter | Spacing between grids, could be a [string CSS units](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units) or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | number \| string \| object \| array | 0 | string: 5.28.0 |
-| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 |
+| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 |
 | wrap | Auto wrap line | boolean | true | 4.8.0 |

 ### Col
@@ -83,8 +83,9 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 | lg | `screen ≥ 992px`, could be a `span` value or an object containing above props | number \| object | - |  |
 | xl | `screen ≥ 1200px`, could be a `span` value or an object containing above props | number \| object | - |  |
 | xxl | `screen ≥ 1600px`, could be a `span` value or an object containing above props | number \| object | - |  |
+| xxxl | `screen ≥ 1920px`, could be a `span` value or an object containing above props | number \| object | - | 6.3.0 |

-You can modify the breakpoints values using by modifying `screen[XS|SM|MD|LG|XL|XXL]` with [theme customization](/docs/react/customize-theme) (since 5.1.0, [sandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)).
+You can modify the breakpoints values using by modifying `screen[XS|SM|MD|LG|XL|XXL|XXXL]` with [theme customization](/docs/react/customize-theme) (since 5.1.0, [sandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)).

 The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) (not including `occasionally part`).

--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@@ -61,9 +61,9 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 |
+| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 |
 | gutter | 栅格间隔，可以写成[字符串CSS单位](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Values_and_Units)或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| string \| object \| array | 0 | string: 5.28.0 |
-| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 |
+| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 |
 | wrap | 是否自动换行 | boolean | true | 4.8.0 |

 ### Col
@@ -82,8 +82,9 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 | lg | `窗口宽度 ≥ 992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - |  |
 | xl | `窗口宽度 ≥ 1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - |  |
 | xxl | `窗口宽度 ≥ 1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - |  |
+| xxxl | `窗口宽度 ≥ 1920px` 响应式栈格，可为栈格数或一个包含其他属性的对象 | number \| object | - | 6.3.0 |

-您可以使用 [主题定制](/docs/react/customize-theme-cn) 修改 `screen[XS|SM|MD|LG|XL|XXL]` 来修改断点值（自 5.1.0 起，[codesandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)）。
+您可以使用 [主题定制](/docs/react/customize-theme-cn) 修改 `screen[XS|SM|MD|LG|XL|XXL|XXXL]` 来修改断点值（自 5.1.0 起，[codesandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)）。

 响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。

--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -20,10 +20,8 @@ const _RowJustify = [
  'space-evenly',
 ] as const;

-type Responsive = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-
 type ResponsiveLike<T> = {
-  [key in Responsive]?: T;
+  [key in Breakpoint]?: T;
 };

 export type Gutter = number | string | undefined | Partial<Record<Breakpoint, number>>;
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@@ -6,17 +6,19 @@ import RightOutlined from '@ant-design/icons/RightOutlined';
 import { omit } from '@rc-component/util';
 import { clsx } from 'clsx';

+import type { Breakpoint } from '../_util/responsiveObserver';
 import { ConfigContext } from '../config-provider';
 import { LayoutContext } from './context';
 import useStyle from './style/sider';

-const dimensionMaxMap = {
+const dimensionMaxMap: Record<Breakpoint, string> = {
  xs: '479.98px',
  sm: '575.98px',
  md: '767.98px',
  lg: '991.98px',
  xl: '1199.98px',
  xxl: '1599.98px',
+  xxxl: `1839.98px`,
 };

 const isNumeric = (val: any) =>
@@ -43,7 +45,7 @@ export interface SiderProps extends React.HTMLAttributes<HTMLDivElement> {
  trigger?: React.ReactNode;
  width?: number | string;
  collapsedWidth?: number | string;
-  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  breakpoint?: Breakpoint;
  theme?: SiderTheme;
  onBreakpoint?: (broken: boolean) => void;
 }
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@@ -100,22 +100,22 @@ The wrapper.

 The sidebar.

-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| breakpoint | [Breakpoints](/components/grid/#col) of the responsive layout | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | - |
-| className | Container className | string | - |
-| collapsed | To set the current status | boolean | - |
-| collapsedWidth | Width of the collapsed sidebar, by setting to 0 a special trigger will appear | number | 80 |
-| collapsible | Whether can be collapsed | boolean | false |
-| defaultCollapsed | To set the initial status | boolean | false |
-| reverseArrow | Reverse direction of arrow, for a sider that expands from the right | boolean | false |
-| style | To customize the styles | CSSProperties | - |
-| theme | Color theme of the sidebar | `light` \| `dark` | `dark` |
-| trigger | Specify the customized trigger, set to null to hide the trigger | ReactNode | - |
-| width | Width of the sidebar | number \| string | 200 |
-| zeroWidthTriggerStyle | To customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object | - |
-| onBreakpoint | The callback function, executed when [breakpoints](/components/grid/#api) changed | (broken) => {} | - |
-| onCollapse | The callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| breakpoint | [Breakpoints](/components/grid/#col) of the responsive layout | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` \| `xxxl` | - | xxxl: 6.3.0 |
+| className | Container className | string | - |  |
+| collapsed | To set the current status | boolean | - |  |
+| collapsedWidth | Width of the collapsed sidebar, by setting to 0 a special trigger will appear | number | 80 |  |
+| collapsible | Whether can be collapsed | boolean | false |  |
+| defaultCollapsed | To set the initial status | boolean | false |  |
+| reverseArrow | Reverse direction of arrow, for a sider that expands from the right | boolean | false |  |
+| style | To customize the styles | CSSProperties | - |  |
+| theme | Color theme of the sidebar | `light` \| `dark` | `dark` |  |
+| trigger | Specify the customized trigger, set to null to hide the trigger | ReactNode | - |  |
+| width | Width of the sidebar | number \| string | 200 |  |
+| zeroWidthTriggerStyle | To customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object | - |  |
+| onBreakpoint | The callback function, executed when [breakpoints](/components/grid/#api) changed | (broken) => {} | - |  |
+| onCollapse | The callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |  |

 #### breakpoint width

@@ -127,6 +127,7 @@ The sidebar.
  lg: '992px',
  xl: '1200px',
  xxl: '1600px',
+  xxxl: '1920px',
 }
 ```

--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@@ -101,22 +101,22 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAA

 侧边栏。

-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| breakpoint | 触发响应式布局的[断点](/components/grid-cn#col) | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | - |
-| className | 容器 className | string | - |
-| collapsed | 当前收起状态 | boolean | - |
-| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 |
-| collapsible | 是否可收起 | boolean | false |
-| defaultCollapsed | 是否默认收起 | boolean | false |
-| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |
-| style | 指定样式 | CSSProperties | - |
-| theme | 主题颜色 | `light` \| `dark` | `dark` |
-| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | ReactNode | - |
-| width | 宽度 | number \| string | 200 |
-| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - |
-| onBreakpoint | 触发响应式布局[断点](/components/grid-cn#api)时的回调 | (broken) => {} | - |
-| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| breakpoint | 触发响应式布局的[断点](/components/grid-cn#col) | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` \| `xxxl` | - | xxxl: 6.3.0 |
+| className | 容器 className | string | - |  |
+| collapsed | 当前收起状态 | boolean | - |  |
+| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 |  |
+| collapsible | 是否可收起 | boolean | false |  |
+| defaultCollapsed | 是否默认收起 | boolean | false |  |
+| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |  |
+| style | 指定样式 | CSSProperties | - |  |
+| theme | 主题颜色 | `light` \| `dark` | `dark` |  |
+| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | ReactNode | - |  |
+| width | 宽度 | number \| string | 200 |  |
+| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - |  |
+| onBreakpoint | 触发响应式布局[断点](/components/grid-cn#api)时的回调 | (broken) => {} | - |  |
+| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |  |

 #### breakpoint width

@@ -128,6 +128,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAA
  lg: '992px',
  xl: '1200px',
  xxl: '1600px',
+  xxxl: '1920px',
 }
 ```

--- a/components/list/index.en-US.md
+++ b/components/list/index.en-US.md
@@ -82,6 +82,7 @@ More about pagination, please check [`Pagination`](/components/pagination/).
 | lg       | `≥992px` column of grid  | number | -       |         |
 | xl       | `≥1200px` column of grid | number | -       |         |
 | xxl      | `≥1600px` column of grid | number | -       |         |
+| xxxl     | `≥1920px` column of grid | number | -       | 6.3.0   |

 ### List.Item

--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@@ -3,6 +3,7 @@ import { clsx } from 'clsx';

 import extendsObject from '../_util/extendsObject';
 import { responsiveArray } from '../_util/responsiveObserver';
+import type { Breakpoint } from '../_util/responsiveObserver';
 import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import { useComponentConfig } from '../config-provider/context';
@@ -30,7 +31,7 @@ export type {

 export type ColumnCount = number;

-export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type ColumnType = 'gutter' | 'column' | Breakpoint;

 export interface ListGridType {
  gutter?: RowProps['gutter'];
@@ -41,6 +42,7 @@ export interface ListGridType {
  lg?: ColumnCount;
  xl?: ColumnCount;
  xxl?: ColumnCount;
+  xxxl?: ColumnCount;
 }

 export type ListSize = 'small' | 'default' | 'large';
@@ -241,7 +243,7 @@ const InternalList = <T,>(props: ListProps<T>, ref: React.ForwardedRef<HTMLDivEl
  }

  const needResponsive = Object.keys(grid || {}).some((key) =>
-    ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key),
+    responsiveArray.includes(key as Breakpoint),
  );
  const screens = useBreakpoint(needResponsive);
  const currentBreakpoint = React.useMemo(() => {
--- a/components/list/index.zh-CN.md
+++ b/components/list/index.zh-CN.md
@@ -75,16 +75,17 @@ List 组件已经进入废弃阶段，将于下个 major 版本移除。

 ### List grid props

-| 参数   | 说明                 | 类型   | 默认值 | 版本 |
-| ------ | -------------------- | ------ | ------ | ---- |
-| column | 列数                 | number | -      |      |
-| gutter | 栅格间隔             | number | 0      |      |
-| xs     | `<576px` 展示的列数  | number | -      |      |
-| sm     | `≥576px` 展示的列数  | number | -      |      |
-| md     | `≥768px` 展示的列数  | number | -      |      |
-| lg     | `≥992px` 展示的列数  | number | -      |      |
-| xl     | `≥1200px` 展示的列数 | number | -      |      |
-| xxl    | `≥1600px` 展示的列数 | number | -      |      |
+| 参数   | 说明                 | 类型   | 默认值 | 版本  |
+| ------ | -------------------- | ------ | ------ | ----- |
+| column | 列数                 | number | -      |       |
+| gutter | 栅格间隔             | number | 0      |       |
+| xs     | `<576px` 展示的列数  | number | -      |       |
+| sm     | `≥576px` 展示的列数  | number | -      |       |
+| md     | `≥768px` 展示的列数  | number | -      |       |
+| lg     | `≥992px` 展示的列数  | number | -      |       |
+| xl     | `≥1200px` 展示的列数 | number | -      |       |
+| xxl    | `≥1600px` 展示的列数 | number | -      |       |
+| xxxl   | `≥1920px` 展示的列数 | number | -      | 6.3.0 |

 ### List.Item

--- a/components/theme/interface/alias.ts
+++ b/components/theme/interface/alias.ts
@@ -579,6 +579,27 @@ export interface AliasToken extends MapToken {
   * @descEN Control the minimum width of extra extra large screens.
   */
  screenXXLMin: number;
+  /**
+   * @nameZH 屏幕宽度（像素） - 超超大屏幕最大值
+   * @nameEN Screen width (pixels) - Extra extra large screens maximum value
+   * @desc 控制超超大屏幕的最大宽度。
+   * @descEN Control the maximum width of extra extra large screens.
+   */
+  screenXXLMax: number;
+  /**
+   * @nameZH 屏幕宽度（像素） - 超超超大屏幕
+   * @nameEN Screen width (pixels) - XXXL screens
+   * @desc 控制超超超大屏幕的屏幕宽度。
+   * @descEN Control the screen width of XXXL screens.
+   */
+  screenXXXL: number;
+  /**
+   * @nameZH 屏幕宽度（像素） - 超超超大屏幕最小值
+   * @nameEN Screen width (pixels) - XXXL screens minimum value
+   * @desc 控制超超超大屏幕的最小宽度。
+   * @descEN Control the minimum width of XXXL screens.
+   */
+  screenXXXLMin: number;

  /**
   * @deprecated
--- a/components/theme/util/alias.ts
+++ b/components/theme/util/alias.ts
@@ -31,6 +31,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
  const screenLG = 992;
  const screenXL = 1200;
  const screenXXL = 1600;
+  const screenXXXL = 1920;

  // Motion
  if (mergedToken.motion === false) {
@@ -164,6 +165,9 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
    screenXLMax: screenXXL - 1,
    screenXXL,
    screenXXLMin: screenXXL,
+    screenXXLMax: screenXXXL - 1,
+    screenXXXL,
+    screenXXXLMin: screenXXXL,

    boxShadowPopoverArrow: '2px 2px 5px rgba(0, 0, 0, 0.05)',
    boxShadowCard: `
--- a/package.json
+++ b/package.json
@@ -337,7 +337,7 @@
    },
    {
      "path": "./dist/antd-with-locales.min.js",
-      "limit": "526 KiB",
+      "limit": "527 KiB",
      "gzip": true
    }
  ],