Layout
Grid
CSS Grid 레이아웃 컴포넌트. gridTemplateColumns, gap 등으로 그리드를 구성합니다.
개요
Grid는 CSS Grid 기반의 레이아웃 컴포넌트입니다. display="grid"가 기본 적용되어 있고, $css prop에 gridTemplateColumns, gridTemplateRows, gap 등을 전달하여 그리드를 구성합니다.
Usage
기본 3열 그리드
import { Grid, Box } from '@featuring-corp/components';
<Grid $css={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: '$spacing-300', width: '500px' }}>
{Array.from({ length: 6 }, (_, i) => (
<Box
key={i}
$css={{
padding: '$spacing-300',
bgColor: '$primary-10',
rounded: '$radius-100',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
Cell {i + 1}
</Box>
))}
</Grid>;반응형 그리드
breakpoint별로 열 수를 다르게 지정할 수 있습니다.
import { Grid, Box } from '@featuring-corp/components';
<Grid
$css={{
gridTemplateColumns: { mobile: '1fr', tablet: 'repeat(2, 1fr)', desktop: 'repeat(3, 1fr)' },
gap: { mobile: '$spacing-200', desktop: '$spacing-400' },
}}
>
{Array.from({ length: 6 }, (_, i) => (
<Box
key={i}
$css={{
padding: '$spacing-300',
bgColor: '$primary-10',
rounded: '$radius-100',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
Cell {i + 1}
</Box>
))}
</Grid>;Props
BoxProps를 그대로 사용합니다. display="grid"가 기본 적용됩니다.
$css prop에 gridTemplateColumns, gridTemplateRows, gap 등을 전달하세요.