Grid

Name: Boreal UI
Author: Davin Chiupka

The Grid component creates a responsive auto-fit grid whose columns adapt to the available width.

Usage & Examples

Responsive Content Grid

AnalyticsWeekly performance

CustomersRecent activity

OrdersOpen fulfilment

responsive-content-grid.tsx

const tileStyle = {
  boxSizing: "border-box",
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  width: "100%",
  height: "100%",
  minHeight: "4.5rem",
  padding: "1rem",
  border: "1px solid var(--border-color)",
  borderRadius: "var(--border-radius-md, 0.75rem)",
  background: "var(--background-color-surface)",
};

<Grid minColumnWidth="9rem" gap="md">
  <div style={tileStyle}><strong>Analytics</strong><span>Weekly performance</span></div>
  <div style={tileStyle}><strong>Customers</strong><span>Recent activity</span></div>
  <div style={tileStyle}><strong>Orders</strong><span>Open fulfilment</span></div>
</Grid>

Props API

Grid props API
				Default	Description
`align`	`LayoutAlign`	No	props	`—`	Align prop for LayoutPrimitive.
`as`	`ElementType`	No	props	`—`	As prop for LayoutPrimitive.
`children`	`ReactNode`	No	props	`—`	Content rendered inside the component.
`className`	`string`	No	styling	`—`	Additional CSS class names for the component root.
`data-testid`	`string`	No	testing	`—`	Test id used to identify the component in tests.
`gap`	`LayoutGap`	No	props	`"md"`	Gap.
`justify`	`LayoutJustify`	No	props	`—`	Justify prop for LayoutPrimitive.
`minColumnWidth`	`string`	No	props	`"16rem"`	Min Column Width.
`testId`	`string`	No	props	`—`	Test id used to identify the component in tests.