Sized Container

The Graphite Grid components, whether using Canvas or DOM, require a container with specified dimensions. This means the HTMLElement hosting the Grid should have explicit height and width values, even if it initially contains no other content.

This requirement doesn't prevent the container from being responsive. Below, we explore several common methods for creating a container suitable for Graphite Grid.

Pixel Value

Setting a fixed pixel value for height and width is the simplest container size method but offers the least flexibility. Typically, you can set the height and allow the width to automatically adjust to fit its parent container, though explicitly setting the width is also feasible.

export function SizeContainerPixelValue() {
  const state = useGraphiteGrid({
    // grid props
  });
 
  return (
    <div style={{ height: 200 }}>
      <GraphiteGridDom state={state} />
    </div>
  );
}CopyCopied!

flex-1 Value

Using a Flexbox layout allows for responsive division of available space. By setting flex: 1 on a Flexbox child, Graphite Grid will occupy the available space without causing the container to overflow or expand beyond its bounds.

export function SizeContainerFlexValue() {
  const state = useGraphiteGrid({
    // grid props
  });
 
  return (
    <div style={{ height: 400, display: "flex", flexDirection: "column" }}>
      <div>A Container With Flex Layout</div>
      <div style={{ flex: 1 }}>
        <GraphiteGridDom state={state} />
      </div>
    </div>
  );
}CopyCopied!

Using CSS Grid

CSS Grid offers a highly flexible layout system. Like Flexbox, Graphite Grid will expand to fill its allocated space within a grid container without causing any overflow.

export function SizeContainerGrid() {
  const state = useGraphiteGrid({
    initial: {
      // grid props
    },
  });
 
  return (
    <div style={{ display: "grid", gridTemplateRows: "auto 300px" }}>
      <div>A Container With Grid Layout</div>
      <div>
        <GraphiteGridDom state={state} />
      </div>
    </div>
  );
}CopyCopied!

Other CSS methods can also effectively size containers for Graphite Grid. Users are encouraged to explore various approaches to best fit their needs.