--- order: 10 title: useBreakpoint Hook --- ## zh-CN 使用 `useBreakpoint` Hook 个性化布局。 ## en-US Use `useBreakpoint` Hook provide personalized layout. ```tsx import React from 'react'; import { Grid, Tag } from 'antd'; const { useBreakpoint } = Grid; const App: React.FC = () => { const screens = useBreakpoint(); return ( <> Current break point:{' '} {Object.entries(screens) .filter(screen => !!screen[1]) .map(screen => ( {screen[0]} ))} ); }; export default App; ```