ChakraUIのbreakpoints

https://chakra-ui.com/docs/styled-system/theme#breakpoints

import { extendTheme } from '@chakra-ui/react'

const breakpoints = {
  sm: '30em',
  md: '48em',
  lg: '62em',
  xl: '80em',
  '2xl': '96em',
}

const theme = extendTheme({ breakpoints, ... })

emは相対的なサイズ

em 単位は活字で言えば「私の親要素のフォントサイズ」を意味します。
https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units

親要素のフォントサイズってどこって思ったら、ブラウザのフォントサイズが16pxがみたい。

16pxとして

sm: "30em", // 480px 
md: "48em", // 768px
lg: "62em", // 992px
xl: "80em", // 1280px

SimpleGridでためして見るのが分かりやすい
https://chakra-ui.com/docs/components/simple-grid#usage
下記だと992px以上は３列

<SimpleGrid columns={[1, 2, 3]} spacing='40px'>
  <Box bg='tomato' height='80px'></Box>
  <Box bg='tomato' height='80px'></Box>
  <Box bg='tomato' height='80px'></Box>
  <Box bg='tomato' height='80px'></Box>
  <Box bg='tomato' height='80px'></Box>
</SimpleGrid>