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>
)
}
用法
¥Usage
SimpleGrid 组件允许你轻松创建响应式网格布局。
¥The SimpleGrid component allows you to create responsive grid layouts with
ease.
import { SimpleGrid } from "@chakra-ui/react"<SimpleGrid>
<Box />
<Box />
</SimpleGrid>示例
¥Examples
列
¥Columns
使用 columns 属性指定网格布局的列数。
¥Specify the number of columns for the grid layout using the columns prop.
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>
)
自动响应
¥Auto-responsive
使用 minChildWidth 属性，使网格响应式布局并自动调整，无需传递列。这在内部使用 CSS 网格自动调整和 minmax()。
¥Make the grid responsive and adjust automatically without passing columns, by
using the minChildWidth prop. This uses css grid auto-fit and minmax()
internally.
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>
)
列跨度
¥Column Span
使用 colSpan 属性指定列的大小。
¥Specify the size of the column by using the colSpan prop.
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>
)
行列间距
¥Row and Column Gap
传递 rowGap 和 columnGap 属性，以更改网格项之间的行距和列距。
¥Pass the rowGap and columnGap props to change the row and column spacing
between the grid items.
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>
)
}