SimpleGrid
SimpleGrid 提供了一个友好的界面，可以轻松创建响应式网格布局。
import { SimpleGrid } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<SimpleGrid columns={2} gap="40px">
<DecorativeBox height="20" />
<DecorativeBox height="20" />
<DecorativeBox height="20" />
<DecorativeBox height="20" />
</SimpleGrid>
)
}
用法
使用SimpleGrid 组件可以轻松创建响应式网格布局。
import { SimpleGrid } from "@chakra-ui/react"<SimpleGrid>
<Box />
<Box />
</SimpleGrid>示例
列数
使用 columns 属性指定网格布局的列数。
import { SimpleGrid } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
export const SimpleGridWithColumns = () => (
<SimpleGrid columns={[2, null, 3]} gap="40px">
<DecorativeBox height="20" />
<DecorativeBox height="20" />
<DecorativeBox height="20" />
<DecorativeBox height="20" />
<DecorativeBox height="20" />
</SimpleGrid>
)
自动响应
通过使用 minChildWidth 属性，使网格具有响应性并自动调整而无需传递列数。这在内部使用 CSS 网格的 auto-fit 和 minmax()。
import { SimpleGrid } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
export const SimpleGridWithAutofit = () => (
<SimpleGrid minChildWidth="sm" gap="40px">
<DecorativeBox height="20" />
<DecorativeBox height="20" />
<DecorativeBox height="20" />
<DecorativeBox height="20" />
<DecorativeBox height="20" />
</SimpleGrid>
)
列跨度
使用 colSpan 属性指定列的大小。
第1列
第2列
import { GridItem, SimpleGrid } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
export const SimpleGridWithColSpan = () => (
<SimpleGrid columns={{ base: 2, md: 4 }} gap={{ base: "24px", md: "40px" }}>
<GridItem colSpan={{ base: 1, md: 3 }}>
<DecorativeBox height="20">Column 1</DecorativeBox>
</GridItem>
<GridItem colSpan={{ base: 1, md: 1 }}>
<DecorativeBox height="20">Column 2</DecorativeBox>
</GridItem>
</SimpleGrid>
)
行间距和列间距
传递 rowGap 和 columnGap 属性以更改网格项之间的行间距和列间距。
import { SimpleGrid } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<SimpleGrid columns={2} columnGap="2" rowGap="4">
<DecorativeBox height="20" />
<DecorativeBox height="20" />
<DecorativeBox height="20" />
<DecorativeBox height="20" />
</SimpleGrid>
)
}