Grid

Grid (그리드)

Grid 컴포넌트는 반응형 12컬럼 그리드 시스템을 제공하는 레이아웃 컴포넌트예요. Grid.Col의 span prop으로 컬럼 너비 비율을 제어해요.

출처: 문서

본문

Grid와 Grid.Col을 사용해 그리드 레이아웃을 만들 수 있어요.

import { Grid } from '@mantine/core';

function Demo() {
  return (
    <Grid>
      <Grid.Col span={4}>1</Grid.Col>
      <Grid.Col span={4}>2</Grid.Col>
      <Grid.Col span={4}>3</Grid.Col>
    </Grid>
  );
}

컬럼 span (Columns span)

Grid.Col의 span prop은 컬럼 너비가 한 줄의 전체 너비에서 차지하는 비율을 제어해요. 기본적으로 그리드는 12컬럼 레이아웃을 사용하므로 span prop은 1부터 12까지의 숫자가 될 수 있어요.

예시:

  • span={3} – 3 / 12 = 줄 너비의 25%
  • span={4} – 4 / 12 = 줄 너비의 33%
  • span={6} – 6 / 12 = 줄 너비의 50%
  • span={12} – 12 / 12 = 줄 너비의 100%

span prop은 뷰포트 너비에 따라 컬럼 너비를 바꾸는 객체 문법도 지원해요. xs, sm, md, lg, xl 키와 1~12 값을 받아요. 문법은 style props와 동일해요.

다음 예시 span={{ base: 12, md: 6, lg: 3 }}:

  • base – 뷰포트 너비가 md 브레이크포인트보다 작을 때 12 / 12 = 줄 너비의 100%
  • md – 뷰포트 너비가 md와 lg 브레이크포인트 사이일 때 6 / 12 = 줄 너비의 50%
  • lg – 뷰포트 너비가 lg 브레이크포인트보다 클 때 3 / 12 = 줄 너비의 25%
import { Grid } from '@mantine/core';

function Demo() {
  return (
    <Grid>
      <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>1</Grid.Col>
      <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>2</Grid.Col>
      <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>3</Grid.Col>
      <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>4</Grid.Col>
    </Grid>
  );
}

갭 (Gap)

gap prop으로 컬럼·행 사이의 간격을 제어할 수 있어요. style props와 같은 방식으로 동작해요. theme.spacing 값을 xs, sm, md, lg, xl 문자열로 참조할 수 있고, 객체 문법으로 뷰포트 너비에 따라 gap을 바꿀 수도 있어요.

import { Grid } from '@mantine/core';

function Demo() {
  return (
    <Grid gap={{ base: 5, xs: 'md', md: 'xl', xl: 50 }}>
      <Grid.Col span={4}>1</Grid.Col>
      <Grid.Col span={4}>2</Grid.Col>
      <Grid.Col span={4}>3</Grid.Col>
    </Grid>
  );
}

행·컬럼 갭 (Row and column gap)

rowGap과 columnGap prop으로 행과 컬럼에 서로 다른 간격을 설정할 수 있어요. 둘 다 설정되면 rowGap과 columnGap이 gap prop을 덮어써요.

import { Grid } from '@mantine/core';

function Demo() {
  return (
    <Grid gap="md" rowGap="xl" columnGap="sm">
      <Grid.Col span={3}>1</Grid.Col>
      <Grid.Col span={3}>2</Grid.Col>
      <Grid.Col span={3}>3</Grid.Col>
      <Grid.Col span={3}>4</Grid.Col>
      <Grid.Col span={3}>5</Grid.Col>
      <Grid.Col span={3}>6</Grid.Col>
      <Grid.Col span={3}>7</Grid.Col>
      <Grid.Col span={3}>8</Grid.Col>
    </Grid>
  );
}

Grow

grow prop이 설정되면 컬럼이 자라서 줄의 남은 공간을 채워요.

import { Grid } from '@mantine/core';

function Demo() {
  return (
    <Grid grow>
      <Grid.Col span={4}>1</Grid.Col>
      <Grid.Col span={4}>2</Grid.Col>
      <Grid.Col span={4}>3</Grid.Col>
      <Grid.Col span={4}>4</Grid.Col>
      <Grid.Col span={4}>5</Grid.Col>
    </Grid>
  );
}

컬럼 오프셋 (Column offset)

Grid.Col 컴포넌트의 offset prop으로 그리드에 간격을 추가할 수 있어요. offset prop은 span prop과 같은 문법을 지원해요. 112 숫자 또는 xs, sm, md, lg, xl 키와 112 값을 가진 객체예요.

import { Grid } from '@mantine/core';

function Demo() {
  return (
    <Grid>
      <Grid.Col span={3}>1</Grid.Col>
      <Grid.Col span={3}>2</Grid.Col>
      <Grid.Col span={3} offset={3}>3</Grid.Col>
    </Grid>
  );
}

순서 (Order)

Grid.Col 컴포넌트의 order prop으로 컬럼의 순서를 바꿀 수 있어요. order prop은 span prop과 같은 문법을 지원해요.

import { Grid } from '@mantine/core';

function Demo() {
  return (
    <Grid>
      <Grid.Col span={3} order={{ base: 2, sm: 1, lg: 3 }}>2</Grid.Col>
      <Grid.Col span={3} order={{ base: 3, sm: 2, lg: 2 }}>3</Grid.Col>
      <Grid.Col span={3} order={{ base: 1, sm: 3, lg: 1 }}>1</Grid.Col>
    </Grid>
  );
}

여러 행 (Multiple rows)

컬럼의 span과 offset 합이 columns prop(기본 12)을 초과하면 컬럼은 다음 행으로 이동해요.

import { Grid } from '@mantine/core';

function Demo() {
  return (
    <Grid>
      <Grid.Col span={4}>1</Grid.Col>
      <Grid.Col span={4}>2</Grid.Col>
      <Grid.Col span={4}>3</Grid.Col>
      <Grid.Col span={4}>4</Grid.Col>
    </Grid>
  );
}

Justify와 align

Grid 컴포넌트의 justify와 align prop으로 justify-content와 align-items CSS 속성을 제어할 수 있어요.

import { Grid } from '@mantine/core';

function Demo() {
  return (
    <Grid justify="flex-start" align="flex-start">
      <Grid.Col span={3} h={80}>1</Grid.Col>
      <Grid.Col span={3} h={120}>2</Grid.Col>
      <Grid.Col span={3} h={100}>3</Grid.Col>
    </Grid>
  );
}

컬럼 정렬 (Column alignment)

개별 Grid.Col 컴포넌트의 align prop으로 각 컬럼의 align-self CSS 속성을 제어할 수 있어요. 특정 컬럼에 대해 그리드의 align prop을 덮어쓸 수 있어요.

import { Grid } from '@mantine/core';

function Demo() {
  return (
    <Grid align="stretch">
      <Grid.Col span={4} align="flex-start">
        <div>flex-start</div>
      </Grid.Col>
      <Grid.Col span={4} align="center">
        <div>center</div>
      </Grid.Col>
      <Grid.Col span={4} align="flex-end">
        <div>flex-end</div>
      </Grid.Col>
    </Grid>
  );
}

자동 크기 컬럼 (Auto sized columns)

span="auto"를 가진 한 줄의 모든 컬럼은 줄을 채우도록 최대한 자라요. 다음 예시에서 두 번째 컬럼은 줄의 50%를 차지하고, 나머지 두 컬럼은 남은 공간을 채우도록 자동으로 크기가 조정돼요.

import { Grid } from '@mantine/core';

function Demo() {
  return (
    <Grid>
      <Grid.Col span="auto">1</Grid.Col>
      <Grid.Col span={6}>2</Grid.Col>
      <Grid.Col span="auto">3</Grid.Col>
    </Grid>
  );
}

컬럼 콘텐츠 맞춤 (Fit column content)

span="content"를 설정하면 컬럼 크기가 콘텐츠 너비에 맞게 자동으로 조정돼요.

import { Grid } from '@mantine/core';

function Demo() {
  return (
    <Grid>
      <Grid.Col span="content">fit content</Grid.Col>
      <Grid.Col span={6}>2</Grid.Col>
    </Grid>
  );
}

컬럼 수 변경 (Change columns count)

기본적으로 그리드는 12컬럼 레이아웃을 사용해요. Grid 컴포넌트의 columns prop으로 변경할 수 있어요. 이 경우 컬럼 span과 offset은 이 값을 기준으로 계산돼요.

다음 예시에서 첫 번째 컬럼은 12 span(12/24)으로 50%, 두 번째·세 번째는 25%(6/24)를 차지해요.

import { Grid } from '@mantine/core';

function Demo() {
  return (
    <Grid columns={24}>
      <Grid.Col span={12}>1</Grid.Col>
      <Grid.Col span={6}>2</Grid.Col>
      <Grid.Col span={6}>3</Grid.Col>
    </Grid>
  );
}

컨테이너 쿼리 (Container queries)

media queries 대신 container queries를 사용하려면 type="container"를 설정해요. 컨테이너 쿼리를 사용하면 모든 반응형 값이 뷰포트 너비가 아닌 컨테이너 너비를 기준으로 조정돼요.

컨테이너 쿼리를 사용할 때는 breakpoints prop을 컨테이너의 정확한 너비 값으로 설정해야 해요.

import { Grid } from '@mantine/core';

function Demo() {
  return (
    // Wrapper div is added for demonstration purposes only.
    // It is not required in real projects.
    <div>
      <Grid
        type="container"
        breakpoints={{ xs: '100px', sm: '200px', md: '300px', lg: '400px', xl: '500px' }}
      >
        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>1</Grid.Col>
        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>2</Grid.Col>
        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>3</Grid.Col>
        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>4</Grid.Col>
      </Grid>
    </div>
  );
}

브라우저 지원

Grid 컴포넌트는 모든 최신 브라우저에서 지원되는 네이티브 gap을 가진 flexbox를 사용해요.

컨테이너 쿼리

type="container"를 사용하면 Grid 컴포넌트는 CSS container queries를 사용해요. 컨테이너 쿼리는 다음 브라우저에서 지원돼요.

  • Chrome 105+
  • Safari 16+
  • Firefox 110+
  • Edge 105+

오래된 브라우저를 지원해야 한다면 기본 type="media"를 사용해요. 이 경우 컨테이너 쿼리 대신 표준 media queries를 사용해요.

media queries(기본) 예시:

import { Grid } from '@mantine/core';

function Demo() {
  return (
    <Grid gap="md">
      <Grid.Col span={{ base: 12, md: 6 }}>1</Grid.Col>
      <Grid.Col span={{ base: 12, md: 6 }}>2</Grid.Col>
    </Grid>
  );
}

container queries 예시:

import { Grid } from '@mantine/core';

function Demo() {
  return (
    <Grid
      type="container"
      breakpoints={{ xs: '100px', sm: '200px', md: '300px', lg: '400px', xl: '500px' }}
      gap="md"
    >
      <Grid.Col span={{ base: 12, md: 6 }}>1</Grid.Col>
      <Grid.Col span={{ base: 12, md: 6 }}>2</Grid.Col>
    </Grid>
  );
}

더 알아보기 (Learn more)

  • SimpleGrid — 자동 정렬 그리드 컴포넌트
  • Flex — flex 레이아웃 컴포넌트
  • Container — 콘텐츠 너비 제한 컴포넌트