NxtGenNxtGenDesign v0/Components
Layout

Grid

격자 배치. 대시보드 카드에는 auto-fit을 권한다.

columns로 열 수를 고정할 수도 있고, minItemWidth로 항목 최소 폭만 주고 열 수를 브라우저에 맡길 수도 있습니다.

대시보드 카드라면 minItemWidth를 먼저 고려하세요. grid-cols-1 md:grid-cols-2 lg:grid-cols-4 같은 breakpoint 분기를 손으로 쌓으면 화면마다 분기 지점이 미묘하게 달라지고, 사이드바가 접혔을 때처럼 컨테이너 폭이 바뀌는 상황에 대응하지 못합니다. auto-fit은 남은 폭을 기준으로 접히므로 분기가 필요 없습니다.

import { Grid } from "@nxtgen-org/react";

auto-fit

minItemWidth만 주면 열 수는 폭에 따라 정해진다. 미리보기 창을 좁혀 보면 접힌다.

반응형 카드 그리드

Requests

지난 24시간

Latency

지난 24시간

Errors

지난 24시간

Tokens

지난 24시간

tsx
<Grid minItemWidth="180px">
  {metrics.map((m) => (
    <Card key={m.label} padding="sm">
      <Card.Title>{m.label}</Card.Title>
      <Card.Description>지난 24시간</Card.Description>
    </Card>
  ))}
</Grid>

고정 열

열 수가 의미를 갖는 경우에만 columns를 쓴다.

columns

1
2
3
4
5
6
tsx
<Grid columns={3}>
  {items.map((v) => <Cell key={v}>{v}</Cell>)}
</Grid>

Props

Box의 모든 prop을 그대로 받습니다.

NameTypeDefaultDescription
minItemWidthstring—항목 최소 폭. 주면 columns를 무시하고 auto-fit으로 동작한다. minmax(min(값, 100%), 1fr)이라 좁은 화면에서도 넘치지 않는다.
columnsnumber—고정 열 수. minItemWidth가 없을 때만 유효.
gapSpace"component"격자 간격.
rowGap / columnGapSpace—축별로 다르게 줄 때.
align"start" | "center" | "end" | "stretch"—항목의 세로 정렬.