Container

Container (컨테이너)

Container 컴포넌트는 콘텐츠를 중앙 정렬하고 size prop으로 지정한 값만큼 max-width를 제한하는 레이아웃 컴포넌트예요.

출처: 문서

본문

Container는 콘텐츠를 중앙 정렬하고 size prop에 지정한 값으로 max-width를 제한해요. 단, size prop은 max-width를 반응형으로 만들지 않아요. 예를 들어 lg로 설정하면 화면 크기와 무관하게 항상 lg 크기를 유지해요.

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

function Demo() {
  const demoProps = {
    bg: 'var(--mantine-color-blue-light)',
    h: 50,
    mt: 'md',
  };

  return (
    <>
      <Container {...demoProps}>Default Container</Container>

      <Container size="xs" {...demoProps}>
        xs Container
      </Container>

      <Container px={0} size={480} {...demoProps}>
        480px Container without padding
      </Container>
    </>
  );
}

Fluid (가득 채우기)

fluid prop을 설정하면 컨테이너가 유동적으로 바뀌어요. 사용 가능한 너비의 100%를 차지하며, size="100%"로 설정한 것과 같아요.

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

function Demo() {
  return (
    <Container fluid h={50} bg="var(--mantine-color-blue-light)">
      Fluid container has 100% max-width
    </Container>
  );
}

크기 커스터마이즈

기존 Container 크기를 바꾸거나 새 크기를 추가하려면 CSS variables와 theme을 활용하면 돼요.

import { Container, MantineProvider, createTheme, rem } from '@mantine/core';

const CONTAINER_SIZES: Record<string, number> = {
  xxs: 300,
  xs: 400,
  sm: 500,
  md: 600,
  lg: 700,
  xl: 800,
  xxl: 900,
};

const theme = createTheme({
  components: {
    Container: Container.extend({
      vars: (_, { size, fluid }) => ({
        root: {
          '--container-size': fluid
            ? '100%'
            : size !== undefined && size in CONTAINER_SIZES
              ? rem(CONTAINER_SIZES[size])
              : rem(size),
        },
      }),
    }),
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Container size="xxs" bg="var(--mantine-color-blue-light)">
        Container with custom size
      </Container>
    </MantineProvider>
  );
}

반응형 max-width

Container의 max-width를 반응형으로 만들려면 Styles API로 classNames를 설정하면 돼요. 예를 들어 화면 크기에 따라 max-width가 달라지는 responsive 크기를 추가할 수 있어요.

import cx from 'clsx';
import { MantineProvider, Container, createTheme } from '@mantine/core';
import classes from './Demo.module.css';

const theme = createTheme({
  components: {
    Container: Container.extend({
      classNames: (_, { size }) => ({
        root: cx({ [classes.responsiveContainer]: size === 'responsive' }),
      }),
    }),
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Container size="responsive" bg="var(--mantine-color-blue-light)">
        Container with responsive size
      </Container>
    </MantineProvider>
  );
}

Grid 전략

버전 8.2.0부터 Container는 더 많은 기능을 제공하는 strategy="grid" prop을 지원해요.

기본 strategy="block"과의 차이점:

• display: block 대신 display: grid를 사용해요
• 기본 인라인 패딩을 포함하지 않아요
• 루트 요소에 max-width를 설정하지 않아요(대신 grid template columns를 사용해요)

strategy="grid"가 지원하는 기능:

• strategy="block"이 지원하는 모든 기능
• data-breakout 속성을 가진 자식은 컨테이너의 부모 요소 전체 너비를 차지해요
• data-breakout 안에 있는 data-container 자식은 메인 grid 열과 같은 너비를 가져요

import { Box, Container } from '@mantine/core';

function Demo() {
  return (
    <Container strategy="grid" size={500}>
      <Box bg="var(--mantine-color-indigo-light)" h={50}>
        Main content
      </Box>

      <Box data-breakout bg="var(--mantine-color-indigo-light)" mt="xs">
        <Box data-container bg="indigo" c="white" h={50} />
      </Box>
    </Container>
  );
}

더 알아보기 (Learn more)

• Center — 중앙 정렬 컴포넌트
• Box — 기본 박스 컴포넌트
• Styles API — 클래스 네임 커스터마이즈