Group

import { GroupDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Group);

Usage

Group is a horizontal flex container. If you need a vertical flex container, use the Stack component instead. If you need to have full control over flex container properties, use the Flex component.

preventGrowOverflow

The preventGrowOverflow prop allows you to control how Group children should behave when there is not enough space to fit them all on one line. By default, children are not allowed to take more space than (1 / children.length) * 100% of parent width (preventGrowOverflow is set to true). To change this behavior, set preventGrowOverflow to false and children will be allowed to grow and take as much space as they need.

Group children

!important Group works correctly only with React elements. Strings, numbers, fragments may have incorrect styles if the grow prop is set:

// Invalid Group usage, do not do this
import { Group } from '@mantine/core';

function InvalidDemo() {
  return (
    <Group grow>
      First string
      <>
        <div>element inside fragment</div>
        <div>another inside fragment</div>
      </>
      {20}
    </Group>
  );
}