@wmcadigital/ui-layout-grid

Responsive layout grid utilities and components.

Installation

Using pnpm (monorepo/workspace):

pnpm add @wmcadigital/ui-layout-grid

Using npm:

npm install @wmcadigital/ui-layout-grid

Using yarn:

yarn add @wmcadigital/ui-layout-grid

What this package provides

• SCSS grid utilities under src/styles/ds-grid/ and compiled CSS at dist/styles/main.css.
• A .ds-grid container class and a set of .ds-col-* column helpers for building responsive, wrapping grid layouts.
• Grid features include configurable column counts, CSS Grid fallbacks, and spacing utilities.

This package is styling-first; it does not export JavaScript components. Import the CSS to apply the grid system.

Usage

Basic grid container with columns:

<div class="ds-grid">
  <div class="ds-col-1">Column 1</div>
  <div class="ds-col-1">Column 2</div>
  <div class="ds-col-1">Column 3</div>
</div>

The ds-col-* classes provide responsive widths and nested spacing. Use the provided spacing utilities from the design system to control gutters.

Notes:

• The grid uses flexbox fallbacks with optional CSS Grid features included (grid-css-grid).
• Class names and exact column counts are defined in src/styles/ds-grid/_grid-cols.scss and can be extended via the SCSS helpers.

Accessibility

• Grid layout is presentational — ensure content within grid cells uses correct semantic markup (headings, lists, landmarks) for assistive technologies.

Customisation

• Override design tokens and spacing variables using the monorepo sass-helpers variables. Override design tokens and spacing variables using the monorepo ui-sass-helpers variables.

Development

Build from the repository root:

pnpm -w -r run build

See the monorepo README.md and DOCS/ for contributing and publishing guidelines.

# Layout Grid

Responsive layout grid utilities and components.

## Usage

Use grid classes to create responsive columns and flow content.

layout-grid

Grid Layout

Usage

import { hello } from '@wmcadigital/ui-layout-grid';