Chakra UI中templateColumns等属性用法及repeat语法疑问

一、核心属性用法说明 #

1. templateColumns #

• 用来定义Grid容器的列布局，和原生CSS的grid-template-columns作用一致
• 举个例子：templateColumns="200px 1fr"表示第一列固定200px宽度，第二列自动占满容器剩余的空间

2. templateRows #

• 负责定义Grid容器的行布局，对应原生CSS的grid-template-rows
• 示例：templateRows="100px auto"意味着第一行固定100px高度，第二行高度根据子项内容自动调整

3. colSpan #

• 控制Grid子项跨越的列数，对应CSS的grid-column属性
• 比如给子项加colSpan={2}，这个子项就会占据2列的宽度空间

4. rowSpan #

• 控制Grid子项跨越的行数，对应CSS的grid-row属性
• 例子：子项设置rowSpan={3}，该子项会占据3行的高度空间

二、templateColumns='repeat(3, 1fr)'的使用方法 #

• 先解释含义：repeat(3, 1fr)是CSS Grid的简写语法，意思是创建3列，每列宽度均分容器的可用空间（1fr代表一份可用空间）
• 在Chakra UI里直接把这个值传给Grid组件的templateColumns属性就行，代码示例：

import { Grid, Box } from '@chakra-ui/react'

function MyGridLayout() {
  return (
    <Grid templateColumns='repeat(3, 1fr)' gap={4}>
      <Box bg='blue.200' p={4}>内容1</Box>
      <Box bg='blue.200' p={4}>内容2</Box>
      <Box bg='blue.200' p={4}>内容3</Box>
      <Box bg='blue.200' p={4}>内容4</Box>
    </Grid>
  )
}

• 做响应式适配的话，用Chakra内置的响应式语法就行，比如不同屏幕显示不同列数：

<Grid 
  templateColumns={{ 
    base: 'repeat(1, 1fr)', // 移动端默认显示1列
    md: 'repeat(3, 1fr)'    // 中等屏幕及以上显示3列
  }} 
  gap={4}
>
  {/* 子项内容 */}
</Grid>

内容的提问来源于stack exchange，提问作者Hiba Youssef