Layout system

Beyond individual components, Asgard ships three primitives for building real application shells: a responsive Grid for content that reflows by breakpoint, resizable Splitter panes for adjustable regions, and scroll-managed SDiv areas with a themed overlay scrollbar. They compose freely: a Splitter pane can hold a Grid, a Grid cell can hold an SDiv, and together they are the same primitives this documentation site is built on.

Reach for Grid when content should reflow with the viewport (cards, forms, sections), Splitter when the user should control how space is divided (editors, dashboards, master/detail), and SDiv whenever a region scrolls independently of the page.

Grid

A 12 (or 24) column responsive grid. A container lays out its item children on the column track; each item declares how many columns it spans at each breakpoint with xs / sm / md / lg / xl. Unspecified breakpoints inherit the next smaller one, so xs={12} md={4} means "full width on phones, a third from tablets up". spacing sets the gutter, the offset props push an item right, and "auto" sizes an item to its content.

Breakpointthese grids reflow at the chosen breakpoint, not the window width

Reflowing columns: xs=12, sm=6, md=4, one column at xs, two at sm, three from md up. Flip the breakpoint above to watch it reflow.

Loading preview…

00000000001
2
3
4
5
<Grid container spacing={2}>
  <Grid item xs={12} sm={6} md={4}>A</Grid>
  <Grid item xs={12} sm={6} md={4}>B</Grid>
  <Grid item xs={12} sm={6} md={4}>C</Grid>
</Grid>

Page shell: header and footer span full width; sidebar and main split from md up.

Loading preview…

00000000001
2
3
4
5
6
<Grid container spacing={2}>
  <Grid item xs={12}>Header</Grid>
  <Grid item xs={12} md={3}>Sidebar</Grid>
  <Grid item xs={12} md={9}>Main</Grid>
  <Grid item xs={12}>Footer</Grid>
</Grid>

Offset & auto: center a column with smOffset, size items to content with xs="auto", and let one fill the rest with a bare xs.

Loading preview…

00000000001
2
3
4
5
6
<Grid container spacing={2}>
  <Grid item xs={12} sm={8} smOffset={2}>Centered</Grid>
  <Grid item xs="auto">auto</Grid>
  <Grid item xs="auto">auto</Grid>
  <Grid item xs>fills the rest</Grid>
</Grid>

Prop	Type	What it does
`container` / `item`	`boolean`	Mark a Grid as a row container or a cell within one.
`spacing`	`GridSpacing`	Gutter between items (theme spacing units).
`columns`	`12 \| 24`	Size of the column system (default 12).
`xs sm md lg xl`	`number \| 'auto' \| boolean`	Columns to span at each breakpoint; a bare prop fills remaining space.
`xsOffset` to `xlOffset`	`number`	Push the item right by N columns at that breakpoint.
`direction` / `wrap`	`row \| column` / `wrap`	Flow direction and wrapping of items.
`justifyContent` / `alignItems`	flex value	Distribute and align items.

The Grid playground has a live breakpoint switcher to drive the reflow by hand.

Splitter

Resizable panes with a draggable handle between them. direction sets the axis; sizes gives each child an initial size as pixels (240), a fraction ('2fr'), a percentage ('30%') or 'flex' to take the remaining space. Drag a handle to resize. Nest splitters, a pane whose content is another Splitter, to build IDE-style workspaces.

Sidebar + content: drag the divider to resize.

Loading preview…

00000000001
2
3
4
<Splitter direction="horizontal" sizes={[220, "flex"]} resizable>
  <nav>Sidebar</nav>
  <main>Content</main>
</Splitter>

Nested: a horizontal split whose second pane is a vertical split, an IDE workspace.

Loading preview…

00000000001
2
3
4
5
6
7
<Splitter direction="horizontal" sizes={[180, "flex"]} resizable>
  <Explorer />
  <Splitter direction="vertical" sizes={["flex", 90]} resizable>
    <Editor />
    <Terminal />
  </Splitter>
</Splitter>

Prop	Type	What it does
`direction`	`'horizontal' \| 'vertical'`	Axis the panes are arranged (and resized) along.
`sizes`	`Array<number \| string>`	Initial size per child: px, `'Nfr'`, `'N%'`, or `'flex'`.
`minSizes` / `maxSizes`	`number[]`	Clamp how small or large each pane can be dragged.
`resizable`	`boolean`	Enable dragging the gutters.
`gutterSize`	`number`	Thickness of the draggable handle in pixels.
`onResize`	`(sizes) => void`	Fires with the new sizes as the user drags.

SDiv

A scroll container with a themed, overlay scrollbar, the same one used throughout these docs. It accepts every div attribute plus scrollbar options, so give it a bounded height (or drop it in a flex/grid cell) and long content scrolls inside it instead of growing the page.

Bounded scroll region: give it a height and content scrolls inside.

Loading preview…

00000000001
2
3
<SDiv scrollbarSize="large" style={{ maxHeight: 180 }}>
  {/* long content scrolls with a themed scrollbar */}
</SDiv>

Prop	Type	What it does
`scrollbarSize`	`'small' \| 'normal' \| 'large'`	Thumb thickness.
`semantic`	`SDivSemantic`	Colour the thumb from a semantic role.
`scrollbarColor` / `scrollbarTrackColor`	`string`	Explicit colour overrides.
...div props	`HTMLDivAttributes`	`style`, `className`, `onScroll` and friends pass through.

Putting it together

A dashboard shell that uses all three: a horizontal Splitter for the sidebar, a scroll-managed SDiv for the main column, and a responsive Grid of cards inside it. Drag the divider, then scroll the cards.

Loading preview…

00000000001
2
3
4
5
6
7
8
9
10
<Splitter direction="horizontal" sizes={[200, "flex"]} resizable>
  <Navigation />
  <SDiv scrollbarSize="large" style={{ height: "100%" }}>
    <Grid container spacing={2}>
      {cards.map((c) => (
        <Grid item xs={12} sm={6} md={4} key={c.id}><Card {...c} /></Grid>
      ))}
    </Grid>
  </SDiv>
</Splitter>

When to use which

Grid for content that should reflow by viewport: card decks, forms, marketing sections, galleries.
Splitter when the user decides how space is divided: editors, dashboards, master/detail, preview panes.
SDiv for any region that scrolls on its own: sidebars, panels, long lists inside a fixed shell.
For full draggable, tabbed, dockable workspaces, compose these into the Docking system.

On this page

Grid Splitter SDiv Putting it together When to use which