Grid

Grid is a responsive 24-column flex layout system. Use Grid as the outer container, Row to create a flex row, and Col to define column widths and responsive behavior.

The component includes:

• constrained or fluid containers;
• horizontal and vertical gutters;
• cross-axis alignment and main-axis distribution;
• wrapping or no-wrap rows;
• 24-column spans, offsets, order, push, and pull;
• CSS flex sizing;
• responsive configuration at xs, sm, md, lg, xl, and xxl breakpoints;
• breakpoint-specific hiding.

See the live Grid showcase.

Components and hierarchyCopy Anchor Link

import { Col, Grid, Row } from '@mosmox/ui';

<Grid>
  <Row gutter={[16, 16]}>
    <Col span={8}>Column 1</Col>
    <Col span={8}>Column 2</Col>
    <Col span={8}>Column 3</Col>
  </Row>
</Grid>

Grid can contain multiple Row components. Each Row can contain any number of Col components. A row has 24 layout units: span={24} fills the row, span={12} takes half, span={8} takes one third, and span={6} takes one quarter.

Columns wrap when their total width is greater than 24 and wrap is enabled. Col renders a div, so the layout components do not change the semantics of their children.

Container widthCopy Anchor Link

Grid has a 1200px maximum width by default and 16px horizontal padding. maxWidth accepts a number (interpreted as pixels) or any CSS length. fluid removes the maximum-width constraint while preserving the horizontal padding.

<Grid>
  <Row><Col span={24}>Constrained content</Col></Row>
</Grid>

<Grid maxWidth="960px">
  <Row><Col span={24}>Readable document width</Col></Row>
</Grid>

<Grid fluid>
  <Row><Col span={24}>Full available width</Col></Row>
</Grid>

Column spans and guttersCopy Anchor Link

span is measured in 24-column units and is clamped to the inclusive range 0–24. offset reserves empty units before the column. gutter applies negative row margins and matching column padding so the content between adjacent columns has the requested spacing.

Pass one value to use the same gutter on both axes, or [horizontal, vertical] to configure them independently. Numbers are interpreted as pixels; strings can be CSS lengths such as 1rem.

<Grid>
  <Row gutter={[24, 16]}>
    <Col span={8}>One third</Col>
    <Col span={8} offset={4}>One third with a four-unit offset</Col>
  </Row>
</Grid>

Responsive columnsCopy Anchor Link

Col supports six breakpoints:

A breakpoint can be a number (a responsive span) or a configuration object. Object properties are span, offset, order, pull, push, flex, and hidden.

<Row gutter={16}>
  <Col xs={24} sm={12} md={8} lg={6}>
    Full width → half → third → quarter
  </Col>
  <Col xs={{ span: 24 }} md={{ span: 8, offset: 1, order: 1 }}>
    Responsive configuration object
  </Col>
  <Col xs={{ span: 24 }} md={{ span: 8, hidden: true }}>
    Hidden from the medium breakpoint upward
  </Col>
</Row>

Responsive values cascade upward. At each breakpoint, the component merges the new configuration with the configuration from the previous breakpoint. For example, md={{ span: 8 }} keeps the xs/sm values below 768px and uses span 8 at md and later breakpoints until another value overrides it.

hidden is only available in the object form and hides the column at that breakpoint. Visibility is controlled independently for each breakpoint with CSS media queries.

Alignment, distribution, and wrappingCopy Anchor Link

Row.align controls the cross-axis alignment. Row.justify controls how free space is distributed along the main axis. wrap defaults to true; set it to false to keep columns on one line.

<Row align="center" justify="space-between" wrap={false}>
  <Col span={6}>Sidebar</Col>
  <Col span={18}>Main content</Col>
</Row>

Supported align values are flex-start, center, flex-end, stretch, and baseline. Supported justify values are flex-start, center, flex-end, space-between, space-around, and space-evenly.

Order, push, pull, and flex sizingCopy Anchor Link

order changes visual flex order without changing DOM order. push and pull translate a column horizontally by 24-column units; they do not change the space allocated to the column and can cause visual overlap. flex sets the CSS flex shorthand and takes precedence over the calculated span width for that configuration.

<Row gutter={16}>
  <Col span={6} order={2}>Sidebar rendered second</Col>
  <Col span={16} offset={2} order={1}>Main content rendered first</Col>
  <Col flex="1 1 240px">Custom flex sizing</Col>
</Row>

These properties can also be placed inside a responsive configuration object to change layout behavior at a breakpoint.

API referenceCopy Anchor Link

GridCopy Anchor Link

RowCopy Anchor Link

ColCopy Anchor Link

GridColConfigCopy Anchor Link

Grid, Row, and Col accept the remaining standard HTMLAttributes<HTMLDivElement> properties, including id, role, aria-*, event handlers, and data-* attributes.

AccessibilityCopy Anchor Link

These are layout primitives and do not add landmark or content semantics automatically. Use semantic elements inside columns and add an appropriate role or aria-label to the surrounding Grid/Row only when the layout represents a named region.