Skip to main content
Version: 1.0.5

README

@spartanfx/react v1.0.5

@spartanfx/react / Grid

Grid

Grid is a container-based responsive grid layout component.

It automatically reflows items based on container width (not viewport), using ResizeObserver to detect size changes. Columns collapse when there isn't enough space to meet the breakThreshold per column.

Example​

// Auto mode (default) - columns auto-fit based on available space
<Grid breakThreshold={200} gap={16}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>

// Fixed columns - 3 columns that collapse to 2 or 1 when needed
<Grid cols={3} breakThreshold={180}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>

// Fr template - proportional columns that collapse in order
<Grid cols="1fr 2fr 1fr" breakThreshold={100}>
  <div>Sidebar</div>
  <div>Main Content</div>
  <div>Sidebar</div>
</Grid>

Variables​