Grid

The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. This component is based on a 12-column grid layout.

It's based on the Material UI Grid.

However, the number of columns is set to 12 for all breakpoints, as it serves most of the use cases and simplifies the implementation. To opt-in to the Design System directives, you can set the columns prop to auto.

Also, the Design System specifications are omissive about the horizontal gutters. The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint. It can be overridden by setting the rowSpacing prop.

Source Code

uikit-react-core

Please refer to the Layout documentation for more information on building layouts with UI Kit.

If you want to create a simple grid where items are distributed accross a specific number of columns, checkout the HvSimpleGrid component.

Default grid

The example below illustrates a common grid layout where items occupy different number of columns based on the screen size.

Current width: xs

xs=12 lg=6

xs=12 md=6 lg=4

xs=12 sm=6 lg=3 xl=2

xs=12 sm=6 md=4 lg=3 xl=2

export default function Demo() {
  const width = useWidth();
  return (
    <div className="flex flex-col gap-sm">
      <HvTypography variant="label">{`Current width: ${width}`}</HvTypography>
      <HvGrid container>
        <HvGrid item xs={12} lg={6}>
          <HvPanel className="content-center h-100px">xs=12 lg=6</HvPanel>
        </HvGrid>
        <HvGrid item xs={12} lg={6}>
          <HvPanel className="content-center h-100px">xs=12 lg=6</HvPanel>
        </HvGrid>
        <HvGrid item xs={12} md={6} lg={4}>
          <HvPanel className="content-center h-100px">xs=12 md=6 lg=4</HvPanel>
        </HvGrid>
        <HvGrid item xs={12} md={6} lg={4}>
          <HvPanel className="content-center h-100px">xs=12 md=6 lg=4</HvPanel>
        </HvGrid>
        <HvGrid item xs={12} md={6} lg={4}>
          <HvPanel className="content-center h-100px">xs=12 md=6 lg=4</HvPanel>
        </HvGrid>
        <HvGrid item xs={12} sm={6} lg={3} xl={2}>
          <HvPanel className="content-center h-100px">
            xs=12 sm=6 lg=3 xl=2
          </HvPanel>
        </HvGrid>
        <HvGrid item xs={12} sm={6} md={4} lg={3} xl={2}>
          <HvPanel className="content-center h-100px">
            xs=12 sm=6 md=4 lg=3 xl=2
          </HvPanel>
        </HvGrid>
        <HvGrid item xs={12} sm={6} md={4} lg={3} xl={2}>
          <HvPanel className="content-center h-100px">
            xs=12 sm=6 md=4 lg=3 xl=2
          </HvPanel>
        </HvGrid>
        <HvGrid item xs={12} sm={6} md={4} lg={3} xl={2}>
          <HvPanel className="content-center h-100px">
            xs=12 sm=6 md=4 lg=3 xl=2
          </HvPanel>
        </HvGrid>
        <HvGrid item xs={12} sm={6} md={4} lg={3} xl={2}>
          <HvPanel className="content-center h-100px">
            xs=12 sm=6 md=4 lg=3 xl=2
          </HvPanel>
        </HvGrid>
        <HvGrid item xs={12} sm={6} md={4} lg={3} xl={2}>
          <HvPanel className="content-center h-100px">
            xs=12 sm=6 md=4 lg=3 xl=2
          </HvPanel>
        </HvGrid>
      </HvGrid>
    </div>
  );
}

export default function Demo() {
  const width = useWidth();
  return (
    <div className="flex flex-col gap-sm">
      <HvTypography variant="label">{`Current width: ${width}`}</HvTypography>
      <HvGrid container>
        <HvGrid item xs={12} lg={6}>
          <HvPanel className="content-center h-100px">xs=12 lg=6</HvPanel>
        </HvGrid>
        <HvGrid item xs={12} lg={6}>
          <HvPanel className="content-center h-100px">xs=12 lg=6</HvPanel>
        </HvGrid>
        <HvGrid item xs={12} md={6} lg={4}>
          <HvPanel className="content-center h-100px">xs=12 md=6 lg=4</HvPanel>
        </HvGrid>
        <HvGrid item xs={12} md={6} lg={4}>
          <HvPanel className="content-center h-100px">xs=12 md=6 lg=4</HvPanel>
        </HvGrid>
        <HvGrid item xs={12} md={6} lg={4}>
          <HvPanel className="content-center h-100px">xs=12 md=6 lg=4</HvPanel>
        </HvGrid>
        <HvGrid item xs={12} sm={6} lg={3} xl={2}>
          <HvPanel className="content-center h-100px">
            xs=12 sm=6 lg=3 xl=2
          </HvPanel>
        </HvGrid>
        <HvGrid item xs={12} sm={6} md={4} lg={3} xl={2}>
          <HvPanel className="content-center h-100px">
            xs=12 sm=6 md=4 lg=3 xl=2
          </HvPanel>
        </HvGrid>
        <HvGrid item xs={12} sm={6} md={4} lg={3} xl={2}>
          <HvPanel className="content-center h-100px">
            xs=12 sm=6 md=4 lg=3 xl=2
          </HvPanel>
        </HvGrid>
        <HvGrid item xs={12} sm={6} md={4} lg={3} xl={2}>
          <HvPanel className="content-center h-100px">
            xs=12 sm=6 md=4 lg=3 xl=2
          </HvPanel>
        </HvGrid>
        <HvGrid item xs={12} sm={6} md={4} lg={3} xl={2}>
          <HvPanel className="content-center h-100px">
            xs=12 sm=6 md=4 lg=3 xl=2
          </HvPanel>
        </HvGrid>
        <HvGrid item xs={12} sm={6} md={4} lg={3} xl={2}>
          <HvPanel className="content-center h-100px">
            xs=12 sm=6 md=4 lg=3 xl=2
          </HvPanel>
        </HvGrid>
      </HvGrid>
    </div>
  );
}

The 12 columns

Grid using the default 12 columns. You can resize the browser to see the gutters’ size change.

Current width: xs (gutter size: 15px)

export default function Demo() {
  const width = useWidth();


  const columns = Array.from({ length: 24 }, (_, index) => index + 1);


  return (
    <div className="flex flex-col gap-sm">
      <HvTypography variant="label">{`Current width: ${width} (gutter size: ${BREAKPOINT_GUTTERS[width]})`}</HvTypography>
      <HvGrid container>
        {columns.map((value) => (
          <HvGrid key={value} item xs={1}>
            <HvPanel className="content-center h-100px">
              {value.toString()}
            </HvPanel>
          </HvGrid>
        ))}
      </HvGrid>
    </div>
  );
}


const BREAKPOINT_GUTTERS = {
  xs: "15px",
  sm: "15px",
  md: "30px",
  lg: "30px",
  xl: "30px",
};

export default function Demo() {
  const width = useWidth();

  const columns = Array.from({ length: 24 }, (_, index) => index + 1);

  return (
    <div className="flex flex-col gap-sm">
      <HvTypography variant="label">{`Current width: ${width} (gutter size: ${BREAKPOINT_GUTTERS[width]})`}</HvTypography>
      <HvGrid container>
        {columns.map((value) => (
          <HvGrid key={value} item xs={1}>
            <HvPanel className="content-center h-100px">
              {value.toString()}
            </HvPanel>
          </HvGrid>
        ))}
      </HvGrid>
    </div>
  );
}

const BREAKPOINT_GUTTERS = {
  xs: "15px",
  sm: "15px",
  md: "30px",
  lg: "30px",
  xl: "30px",
};

Different number of columns

If you set the columns prop to auto, the grid will automatically adjust the number of columns based on the current breakpoint. Resize the browser to see the number of columns change.

Current width: xs (4 columns)

const BREAKPOINT_COLUMNS = {
  xs: 4,
  sm: 8,
  md: 12,
  lg: 12,
  xl: 12,
};


export default function Demo() {
  const width = useWidth();


  const columns = Array.from({ length: 24 }, (_, index) => index + 1);


  return (
    <div className="flex flex-col gap-sm">
      <HvTypography variant="label">{`Current width: ${width} (${BREAKPOINT_COLUMNS[width]} columns)`}</HvTypography>
      <HvGrid container columns="auto">
        {columns.map((value) => (
          <HvGrid key={value} item xs={1}>
            <HvPanel className="content-center h-100px">
              {value.toString()}
            </HvPanel>
          </HvGrid>
        ))}
      </HvGrid>
    </div>
  );
}

const BREAKPOINT_COLUMNS = {
  xs: 4,
  sm: 8,
  md: 12,
  lg: 12,
  xl: 12,
};

export default function Demo() {
  const width = useWidth();

  const columns = Array.from({ length: 24 }, (_, index) => index + 1);

  return (
    <div className="flex flex-col gap-sm">
      <HvTypography variant="label">{`Current width: ${width} (${BREAKPOINT_COLUMNS[width]} columns)`}</HvTypography>
      <HvGrid container columns="auto">
        {columns.map((value) => (
          <HvGrid key={value} item xs={1}>
            <HvPanel className="content-center h-100px">
              {value.toString()}
            </HvPanel>
          </HvGrid>
        ))}
      </HvGrid>
    </div>
  );
}

HvSimpleGrid

Global Actions Header