import { Grid } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Grid templateColumns="repeat(3, 1fr)" gap="6">
<DecorativeBox h="20" />
<DecorativeBox h="20" />
<DecorativeBox h="20" />
</Grid>
)
}
用法
import { Grid, GridItem } from "@chakra-ui/react"<Grid>
<GridItem />
<GridItem />
</Grid>示例
列跨度
将 colSpan 属性传递给 GridItem 以跨列。
import { Grid, GridItem } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Grid templateColumns="repeat(4, 1fr)" gap="6">
<GridItem colSpan={2}>
<DecorativeBox h="20" />
</GridItem>
<GridItem colSpan={1}>
<DecorativeBox h="20" />
</GridItem>
<GridItem colSpan={1}>
<DecorativeBox h="20" />
</GridItem>
</Grid>
)
}
跨列
在某些布局中，您可能需要某些网格项跨越特定数量的列或行，而不是均匀分布
rowSpan=2
colSpan=2
colSpan=2
colSpan=4
import { Grid, GridItem } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Grid
h="200px"
templateRows="repeat(2, 1fr)"
templateColumns="repeat(5, 1fr)"
gap={4}
>
<GridItem rowSpan={2} colSpan={1}>
<DecorativeBox>rowSpan=2</DecorativeBox>
</GridItem>
<GridItem colSpan={2}>
<DecorativeBox>colSpan=2</DecorativeBox>
</GridItem>
<GridItem colSpan={2}>
<DecorativeBox>colSpan=2</DecorativeBox>
</GridItem>
<GridItem colSpan={4}>
<DecorativeBox>colSpan=4</DecorativeBox>
</GridItem>
</Grid>
)
}
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
templateColumns | SystemStyleObject['gridTemplateColumns'] | |
autoFlow | SystemStyleObject['gridAutoFlow'] | |
autoRows | SystemStyleObject['gridAutoRows'] | |
autoColumns | SystemStyleObject['gridAutoColumns'] | |
templateRows | SystemStyleObject['gridTemplateRows'] | |
templateAreas | SystemStyleObject['gridTemplateAreas'] | |
column | SystemStyleObject['gridColumn'] | |
row | SystemStyleObject['gridRow'] | |
inline | boolean |