SimpleGrid

SimpleGrid

각 항목이 동일한 공간을 차지하는 반응형 그리드 컴포넌트예요. CSS grid 레이아웃을 사용하는 동일 너비 열의 반응형 그리드 시스템이에요.

출처: 문서

본문

사용법 (Usage)

SimpleGrid은 동일한 너비의 열을 가진 반응형 그리드 시스템이에요. CSS grid 레이아웃을 사용해요. 열마다 다른 너비를 설정해야 한다면 Grid 컴포넌트를 사용해요.

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

function Demo() {
  return (
    <SimpleGrid cols={3} spacing="md">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </SimpleGrid>
  );
}

spacing과 verticalSpacing prop

spacing prop은 열 사이의 가로 간격을 제어해요. 기본적으로 행 사이의 세로 간격에도 사용돼요. 세로 간격을 다르게 하려면 verticalSpacing prop을 명시적으로 설정해요.

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

// `spacing`은 가로·세로 간격에 모두 사용됨
const Spacing = () => <SimpleGrid cols={3} spacing="md">{/* ... */}</SimpleGrid>;

// `spacing`은 가로 간격, `verticalSpacing`은 세로 간격에 사용됨
const VerticalSpacing = () => <SimpleGrid cols={3} spacing="md" verticalSpacing="xl">{/* ... */}</SimpleGrid>;

반응형 props (Responsive props)

cols, spacing, verticalSpacing prop은 반응형 값을 위한 객체 표기법을 지원해요. style props와 같은 방식으로 동작해요. 객체는 base, xs, sm, md, lg, xl 키를 가질 수 있고, 해당 키의 값은 현재 뷰포트 너비에 따라 적용돼요.

아래 예시에서 cols={{ base: 1, sm: 2, lg: 5 }}의 의미는 다음과 같아요.

• 뷰포트 너비가 sm 브레이크포인트보다 작으면 열 1개
• 뷰포트 너비가 sm과 lg 브레이크포인트 사이면 열 2개
• 뷰포트 너비가 lg 브레이크포인트보다 크면 열 5개

spacing과 verticalSpacing prop에도 같은 로직이 적용돼요.

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

function Demo() {
  return (
    <SimpleGrid cols={{ base: 1, sm: 2, lg: 5 }}>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </SimpleGrid>
  );
}

컨테이너 쿼리 (Container queries)

미디어 쿼리 대신 컨테이너 쿼리를 사용하려면 type="container"를 설정해요. 컨테이너 쿼리에서는 그리드 열과 간격이 뷰포트 너비가 아니라 컨테이너 너비를 기준으로 조정돼요.

컨테이너 쿼리 사용 시 cols, spacing, verticalSpacing prop의 키에는 theme.breakpoints 값을 참조할 수 없어요. 정확한 px 또는 em 값을 사용해야 해요.

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

function Demo() {
  return (
    // Wrapper div is added for demonstration purposes only,
    // it is not required in real projects
    <div style={{ containerType: 'inline-size' }}>
      <SimpleGrid type="container" cols={{ base: 1, '300px': 2, '500px': 5 }} spacing="md">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
      </SimpleGrid>
    </div>
  );
}

열 자동 채우기 (Auto-fill columns)

minColWidth prop을 설정하면 CSS Grid auto-fill을 사용해 사용 가능한 공간과 최소 열 너비에 따라 열 수를 자동으로 조정해요. minColWidth가 설정되면 cols prop은 무시돼요.

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

function Demo() {
  return (
    <SimpleGrid minColWidth={120} spacing="md">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </SimpleGrid>
  );
}

auto-fill vs auto-fit

기본적으로 minColWidth는 auto-fill 동작을 사용해요. autoFlow prop으로 auto-fit으로 바꿀 수 있어요. 두 방식의 차이는 다음과 같아요.

• auto-fill은 컨테이너를 넘치지 않게 가능한 많은 트랙을 만들고, 항목이 행을 채우지 않으면 빈 트랙을 남겨둬요
• auto-fit은 같은 방식으로 동작하지만 빈 트랙을 접어서 접어서 항목이 남은 공간을 채우도록 늘어날 수 있게 해요

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

function Demo() {
  return (
    <>
      {/* auto-fill: 빈 트랙이 유지되고 항목이 늘어나지 않음 */}
      <SimpleGrid minColWidth={120} autoFlow="column">
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </SimpleGrid>

      {/* auto-fit: 빈 트랙이 접히고 항목이 행을 채우도록 늘어남 */}
      <SimpleGrid minColWidth={120} autoFlow="row">
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </SimpleGrid>
    </>
  );
}

자동 행 (Auto rows)

autoRows prop을 설정하면 암시적으로 생성되는 그리드 행의 크기를 제어할 수 있어요. 모든 행의 높이를 같게 하거나 최소 높이를 지정할 때 유용해요.

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

function Demo() {
  return (
    <SimpleGrid cols={3} autoRows="minmax(120px, auto)">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </SimpleGrid>
  );
}

브라우저 지원 (Browser support)

SimpleGrid은 CSS Grid Layout을 사용하며 모든 최신 브라우저에서 지원돼요. 더 오래된 브라우저를 지원해야 한다면 (flexbox 기반의) Grid 컴포넌트를 사용해요.

type="container"가 설정되면 SimpleGrid은 컨테이너 쿼리를 사용해요. 2023년 2월부터 컨테이너 쿼리는 모든 최신 브라우저에서 지원돼요. 더 오래된 브라우저를 지원해야 한다면 컨테이너 쿼리 옵션을 사용하지 마세요.

더 알아보기 (Learn more)

• Group
• Space
• Grid