Mosaic | MDK

Mosaic - Grid layout component with named areas Features: - Named grid areas for layout - Responsive: stacks on mobile, grid on desktop - Auto-generates colu…

Mosaic - Grid layout component with named areas

Features: - Named grid areas for layout - Responsive: stacks on mobile, grid on desktop - Auto-generates column tracks - Validates column count vs template

import { Mosaic } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`template`	Required	`string[] \| string[][]`	—	—
`gap`	Optional	`string \| undefined`	—	—
`rowHeight`	Optional	`string \| undefined`	—	—
`columns`	Optional	`string \| string[] \| undefined`	—	—
`children`	Required	`React.ReactNode`	—	—
`className`	Optional	`string \| undefined`	—	—

Usage

A CSS Grid layout component that maps named areas to child Mosaic.Item elements. Supports 1D (space-separated string rows) and 2D array templates.

Notes

CSS grid-area names cannot start with a digit; Mosaic automatically prefixes numeric names with 'a' (e.g. area '1' becomes 'a1').
Use . in the template to leave a cell empty.
On mobile (below the SCSS breakpoint) the grid stacks as a single column by default.

Example

/** * Runnable example for Mosaic. */import { Mosaic } from '@tetherto/mdk-react-devkit'export const MosaicExample = () => (  <div className="mdk-example-col">    <Mosaic      template={['header header', 'sidebar content', 'footer footer']}      gap="8px"      rowHeight="auto"    >      <Mosaic.Item        area="header"        className="mdk-example-inline"        style={{ background: 'var(--mdk-color-bg-card)', padding: '8px', borderRadius: '4px' }}      >        Header      </Mosaic.Item>      <Mosaic.Item        area="sidebar"        className="mdk-example-inline"        style={{ background: 'var(--mdk-color-bg-card)', padding: '8px', borderRadius: '4px' }}      >        Sidebar      </Mosaic.Item>      <Mosaic.Item        area="content"        className="mdk-example-inline"        style={{ background: 'var(--mdk-color-bg-card)', padding: '8px', borderRadius: '4px' }}      >        Content      </Mosaic.Item>      <Mosaic.Item        area="footer"        className="mdk-example-inline"        style={{ background: 'var(--mdk-color-bg-card)', padding: '8px', borderRadius: '4px' }}      >        Footer      </Mosaic.Item>    </Mosaic>  </div>)