Sized Container

LyteNyte Grid requires a container with explicitly defined dimensions. The HTMLElement hosting the Grid must have specified height and width values, even when initially empty.

This requirement doesn't limit responsiveness. Below are several effective approaches for creating containers that work well with LyteNyte Grid.

Pixel Value

Defining fixed pixel values for height and width provides the simplest approach, though with limited flexibility. In most cases, you can set a specific height while allowing the width to adjust automatically based on the parent container. Setting an explicit width is also possible when needed.

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

flex-1 Value

Flexbox layouts enable responsive distribution of available space. When you assign flex: 1 to a Flexbox child element, LyteNyte Grid will utilize the available space efficiently without causing overflow or expanding beyond its container boundaries.

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

Using CSS Grid

CSS Grid provides a sophisticated and versatile layout system. Similar to Flexbox, LyteNyte Grid will expand to fill its designated space within a grid container while maintaining proper containment.

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

Additional CSS methods can also be employed to effectively size containers for LyteNyte Grid. We encourage developers to experiment with different approaches to find the solution that best suits their specific requirements.