Grid

12칸을 기준으로 하는 반응형 레이아웃입니다. GridContainer가 칸 수와 gutter를 정하고, Grid가 그중 몇 칸을 차지할지 정합니다.

import { Grid, GridContainer } from 'neba';

<GridContainer spacing={3}>
  <Grid span={{ xs: 12, md: 8 }}>본문</Grid>
  <Grid span={{ xs: 12, md: 4 }}>사이드바</Grid>
</GridContainer>;

GridContainer는 표면을 그리지 않으므로 variant · color · elevation이 없습니다. sheet가 필요하면 Box나 Card로 감싸세요.

Props

GridContainer

Prop	타입	기본값	설명
columns	number | Partial<Record<NebaBreakpoint, number>>	12	한 줄이 몇 칸으로 나뉘는지. 안쪽의 모든 span과 offset이 이 수를 기준으로 계산됩니다
spacing	number | Partial<Record<NebaBreakpoint, number>>	2	항목 사이의 거터. Tailwind 간격 스케일이라 4는 1rem이며, 소수점도 받습니다 (1.5 → 0.375rem)
rowSpacing	number | Partial<Record<NebaBreakpoint, number>>	spacing	행 사이의 거터만
columnSpacing	number | Partial<Record<NebaBreakpoint, number>>	spacing	열 사이의 거터만
justifyContent	'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch'	—	한 줄이 쓰고 남은 공간을 어떻게 나눌지. prop으로 직접 받습니다. sx도 className도 필요 없습니다
alignItems	'start' | 'center' | 'end' | 'stretch' | 'baseline'	'stretch'	항목들이 줄을 가로질러 어디에 놓일지. 기본값은 늘리기라서 한 줄의 카드들은 높이가 같아집니다
alignContent	'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch'	—	그리드가 담긴 상자보다 짧을 때 행들이 어디에 놓일지. 높이를 가진 컨테이너에서만 보입니다
wrap	boolean	true	칸이 모자란 줄이 다음 줄로 이어지는지. 끄면 넘치는 한 줄이 되며, 가로 스크롤 스트립이 원하는 모습입니다
padded	boolean	true	안쪽 여백. 이미 여백을 가진 것 안에 있다면 끄세요. Container, Card, 또 다른 그리드
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	여백의 크기. Box에서와 같이 높이도 타입 스케일도 건드리지 않으며, 거터를 정하는 spacing과는 별개입니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (<section />). Base UI의 render prop 그대로
children	ReactNode	—	Grid 항목들

Grid

Prop	타입	기본값	설명
span	GridSpan | Partial<Record<NebaBreakpoint, GridSpan>>	a full row	컨테이너의 칸을 몇 개 차지할지. 브레이크포인트마다 다르게 줄 수 있습니다. { xs: 12, md: 6 }. 줄보다 넓은 span은 넘치지 않고 줄에 맞춰 잘립니다. 'auto'는 내용만큼, 'grow'는 줄에 남은 공간까지
offset	number | Partial<Record<NebaBreakpoint, number>>	0	항목 앞에 밀어 넣는 빈 칸 수. 줄의 시작에서 센 절대 위치가 아니라 항목 앞에 들어가는 공간입니다
alignSelf	'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline'	—	이 항목만 줄의 alignItems를 따르지 않게 합니다
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (<li />). Base UI의 render prop 그대로
children	ReactNode	—	칸에 담기는 내용

두 컴포넌트 모두 <div>의 native 속성을 그대로 전달합니다.

예시

span

span은 컨테이너의 칸 수에 대한 값입니다. 기본 12칸에서 span={6}은 절반이고, columns={24}라면 같은 6이 4분의 1입니다.

너비는 (100% + gutter) × span / columns − gutter로 계산되므로, span={1} 열두 개와 span={12} 하나가 정확히 같은 지점에서 끝납니다.

import { Box, Grid, GridContainer } from 'neba';

const ROWS = [[12], [6, 6], [4, 4, 4], [3, 3, 3, 3], [8, 4]];

export default function GridSpans() {
  return (
    <div className="flex flex-col gap-2">
      {ROWS.map((row, index) => (
        <GridContainer key={index} padded={false}>
          {row.map((span, cell) => (
            <Grid key={cell} span={span}>
              <Box size="sm" className="text-center">
                {span}
              </Box>
            </Grid>
          ))}
        </GridContainer>
      ))}
    </div>
  );
}

auto · grow

12칸으로 나눌 수 없는 너비가 둘 있습니다. span="auto"는 칸에 든 내용만큼의 너비이고(줄 끝의 아바타, chip, 버튼), span="grow"는 거기에 줄에 남은 공간을 더한 너비입니다. 아이콘과 액션 사이에 놓이는 제목이 후자입니다.

둘 다 반응형 map 안에서 숫자와 섞입니다. 좁은 폭에서는 내용 너비, 48rem부터는 줄의 3분의 1입니다.

<Grid span={{ xs: 'auto', md: 4 }}>참조</Grid>

import { Avatar, Box, Button, Chip, Grid, GridContainer, Typography } from 'neba';

/**
 * The two widths a column count cannot reach: `auto` is as wide as what is in
 * the cell, and `grow` is that plus whatever the row has left over.
 */
export default function GridAutoGrow() {
  return (
    <div className="flex flex-col gap-3">
      <GridContainer spacing={2} padded={false} alignItems="center" wrap={false}>
        <Grid span="auto">
          <Avatar name="Rhea Patel" size="sm" />
        </Grid>
        <Grid span="grow" className="min-w-0">
          <Typography level="body" className="truncate">
            Rhea Patel opened a pull request
          </Typography>
        </Grid>
        <Grid span="auto">
          <Chip size="sm" color="success">
            Ready
          </Chip>
        </Grid>
        <Grid span="auto">
          <Button size="sm" variant="outline">
            Review
          </Button>
        </Grid>
      </GridContainer>

      {/* A keyword and a number in one map: the contents' width on a phone,
          a third of the row from 48rem up. */}
      <GridContainer spacing={2} padded={false}>
        <Grid span={{ xs: 'auto', md: 4 }}>
          <Box size="sm" className="text-center">
            auto, then 4
          </Box>
        </Grid>
        <Grid span={{ xs: 'grow', md: 8 }}>
          <Box size="sm" className="text-center">
            grow, then 8
          </Box>
        </Grid>
      </GridContainer>
    </div>
  );
}

breakpoint

span에 객체를 주면 폭마다 다른 값을 적용합니다. 각 항목은 그 breakpoint 이상에 적용되는 하한이므로 두 개만 적어도 레이아웃 하나가 정의됩니다.

폭은 Tailwind 기본값과 같아서 sm이 40rem, md가 48rem, lg가 64rem, xl이 80rem입니다. xs는 0이며 media query가 붙지 않습니다. Grid와 md: 유틸리티가 같은 지점에서 바뀝니다.

columns · spacing · rowSpacing · columnSpacing · offset도 모두 같은 방식으로 반응형 값을 받습니다.

import { Box, Grid, GridContainer } from 'neba';

/** Resize the window: four rows, then two, then one. */
export default function GridResponsive() {
  return (
    <GridContainer spacing={2} padded={false}>
      {['Overview', 'Traffic', 'Revenue', 'Errors'].map((label) => (
        <Grid key={label} span={{ xs: 12, sm: 6, lg: 3 }}>
          <Box className="text-center">{label}</Box>
        </Grid>
      ))}
    </GridContainer>
  );
}

spacing · rowSpacing · columnSpacing

spacing은 Tailwind의 간격 스케일입니다. spacing={4}는 1rem으로, gap-4나 Box의 p-4와 같은 길이입니다. 소수도 받으므로 spacing={1.5}는 0.375rem입니다.

rowSpacing과 columnSpacing은 각각 한 축만 덮어씁니다.

import { Box, Grid, GridContainer } from 'neba';

export default function GridSpacing() {
  return (
    <div className="flex flex-col gap-6">
      {/* One number sets both gutters. Fractions are allowed. */}
      {[0, 1.5, 4].map((spacing) => (
        <GridContainer key={spacing} spacing={spacing} padded={false}>
          {[0, 1, 2, 3].map((cell) => (
            <Grid key={cell} span={3}>
              <Box size="sm" className="text-center">
                spacing {spacing}
              </Box>
            </Grid>
          ))}
        </GridContainer>
      ))}

      {/* Or one per axis: tight columns, generous rows. */}
      <GridContainer columnSpacing={1} rowSpacing={6} padded={false}>
        {[0, 1, 2, 3, 4, 5].map((cell) => (
          <Grid key={cell} span={4}>
            <Box size="sm" className="text-center">
              1 / 6
            </Box>
          </Grid>
        ))}
      </GridContainer>
    </div>
  );
}

columns

칸 수입니다. 12가 기본값이지만 5로 나뉘지 않으므로 24 같은 값도 쓸 수 있습니다. 컨테이너 아래의 모든 span과 offset이 이 수를 기준으로 계산됩니다. 한 줄보다 넓은 span은 넘치지 않고 줄에 맞춰 잘립니다.

import { Box, Grid, GridContainer } from 'neba';

export default function GridColumns() {
  return (
    <div className="flex flex-col gap-6">
      {/* Twelve does not divide by five. Fifteen does. */}
      <GridContainer columns={15} spacing={2} padded={false}>
        {[0, 1, 2, 3, 4].map((cell) => (
          <Grid key={cell} span={3}>
            <Box size="sm" className="text-center">
              3 / 15
            </Box>
          </Grid>
        ))}
      </GridContainer>

      {/* A finer grid for a layout that needs seven-eighths of a row. */}
      <GridContainer columns={24} spacing={2} padded={false}>
        <Grid span={21}>
          <Box size="sm" className="text-center">
            21 / 24
          </Box>
        </Grid>
        <Grid span={3}>
          <Box size="sm" className="text-center">
            3
          </Box>
        </Grid>
      </GridContainer>
    </div>
  );
}

offset

항목 앞에 밀어 넣는 빈 칸 수입니다. 줄의 시작에서 센 절대 위치가 아니라 그 자리에 삽입되는 공간이므로, 앞에 이미 항목이 있다면 그 뒤에서부터 밀어냅니다.

import { Box, Grid, GridContainer } from 'neba';

export default function GridOffset() {
  return (
    <div className="flex flex-col gap-2">
      {/* The middle third: four columns in, four columns wide. */}
      <GridContainer padded={false}>
        <Grid span={4} offset={4}>
          <Box size="sm" className="text-center">
            span 4, offset 4
          </Box>
        </Grid>
      </GridContainer>

      {/* Pushed to the end of the row. */}
      <GridContainer padded={false}>
        <Grid span={3} offset={9}>
          <Box size="sm" className="text-center">
            span 3, offset 9
          </Box>
        </Grid>
      </GridContainer>

      {/* An offset is space pushed in ahead of the item, so the gap here is
          between the two cells rather than measured from the start of the row. */}
      <GridContainer padded={false}>
        <Grid span={3}>
          <Box size="sm" className="text-center">
            span 3
          </Box>
        </Grid>
        <Grid span={3} offset={3}>
          <Box size="sm" className="text-center">
            span 3, offset 3
          </Box>
        </Grid>
      </GridContainer>
    </div>
  );
}

justifyContent · alignItems · alignContent · alignSelf

정렬은 className이 아니라 각각의 prop으로 지정합니다. 앞의 셋은 GridContainer에, alignSelf는 Grid에 있습니다.

값은 start / center / end이며 RTL에서 뒤집힙니다. space-between 같은 분배 값은 CSS 이름을 그대로 씁니다.

import { Box, Grid, GridContainer } from 'neba';

export default function GridAlignment() {
  return (
    <div className="flex flex-col gap-6">
      {/* Three columns in a twelve-column row leave three spare. justifyContent
          decides where the slack goes — no sx, no className. */}
      {(['start', 'center', 'end', 'space-between'] as const).map((justify) => (
        <GridContainer key={justify} justifyContent={justify} padded={false}>
          {[0, 1, 2].map((cell) => (
            <Grid key={cell} span={3}>
              <Box size="sm" className="text-center">
                {justify}
              </Box>
            </Grid>
          ))}
        </GridContainer>
      ))}

      {/* Items are the same height as their row by default; alignItems opts out,
          and alignSelf lets one item disagree with the rest. */}
      <GridContainer alignItems="center" padded={false}>
        <Grid span={4}>
          <Box size="sm" className="h-20 text-center">
            tall
          </Box>
        </Grid>
        <Grid span={4}>
          <Box size="sm" className="text-center">
            centred
          </Box>
        </Grid>
        <Grid span={4} alignSelf="end">
          <Box size="sm" className="text-center">
            alignSelf end
          </Box>
        </Grid>
      </GridContainer>
    </div>
  );
}

padded

spacing은 항목 사이의 간격이고, padded는 grid 둘레의 여백입니다. 기본값은 true이므로 Container나 Card, 또는 다른 grid 안에 넣을 때는 끄세요.

여백의 크기는 size와 density가 정합니다.

import { Box, Grid, GridContainer } from 'neba';

export default function GridPadding() {
  return (
    <div className="flex flex-col gap-4">
      {/* The default: padded on the size scale, so the grid does not run into
          whatever is around it. */}
      <Box padded={false}>
        <GridContainer size="md">
          {[0, 1, 2].map((cell) => (
            <Grid key={cell} span={4}>
              <Box size="sm" variant="solid" className="text-center">
                padded
              </Box>
            </Grid>
          ))}
        </GridContainer>
      </Box>

      {/* Off, for a grid already inside something that pads — a Card, a
          Container, another grid. */}
      <Box padded={false}>
        <GridContainer padded={false}>
          {[0, 1, 2].map((cell) => (
            <Grid key={cell} span={4}>
              <Box size="sm" variant="solid" className="text-center">
                padded={'{false}'}
              </Box>
            </Grid>
          ))}
        </GridContainer>
      </Box>
    </div>
  );
}

중첩

grid 안의 grid는 Grid 안에 GridContainer를 넣는 형태입니다. 안쪽 grid는 자기 칸이 받은 너비를 다시 나누므로, 거기서의 span={6}은 절반의 절반입니다.

import { Box, Grid, GridContainer } from 'neba';

/**
 * A grid inside a grid is a `GridContainer` inside a `Grid`, never a `Grid`
 * that is also a container. The inner grid re-divides the width its cell was
 * given, so `span={6}` in here is half of a half.
 */
export default function GridNested() {
  return (
    <GridContainer spacing={2} padded={false}>
      <Grid span={{ xs: 12, sm: 6 }}>
        <Box padded={false} className="p-2">
          <GridContainer spacing={1} padded={false}>
            <Grid span={6}>
              <Box size="xs" variant="solid" className="text-center">
                6
              </Box>
            </Grid>
            <Grid span={6}>
              <Box size="xs" variant="solid" className="text-center">
                6
              </Box>
            </Grid>
            <Grid span={12}>
              <Box size="xs" variant="solid" className="text-center">
                12
              </Box>
            </Grid>
          </GridContainer>
        </Box>
      </Grid>
      <Grid span={{ xs: 12, sm: 6 }}>
        <Box className="h-full">The other half, undivided</Box>
      </Grid>
    </GridContainer>
  );
}