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>
)
}
用法
¥Usage
import { Grid, GridItem } from "@chakra-ui/react"<Grid>
<GridItem />
<GridItem />
</Grid>示例
¥Examples
列跨度
¥Col Span
将 colSpan 属性传递给 GridItem 以跨列显示。
¥Pass colSpan prop to GridItem to span across columns.
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>
)
}
跨列
¥Spanning Columns
在某些布局中，你可能需要某些网格项跨越特定数量的列或行，而不是均匀分布。
¥In some layouts, you may need certain grid items to span specific amount of columns or rows instead of an even distribution
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>
)
}
属性
¥Props
| Prop | Default | Type |
|---|---|---|
templateColumns | SystemStyleObject['gridTemplateColumns'] | undefined | |
autoFlow | SystemStyleObject['gridAutoFlow'] | undefined | |
autoRows | SystemStyleObject['gridAutoRows'] | undefined | |
autoColumns | SystemStyleObject['gridAutoColumns'] | undefined | |
templateRows | SystemStyleObject['gridTemplateRows'] | undefined | |
templateAreas | SystemStyleObject['gridTemplateAreas'] | undefined | |
column | SystemStyleObject['gridColumn'] | undefined | |
row | SystemStyleObject['gridRow'] | undefined | |
inline | boolean | undefined | |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |