@kit-ng-ui/grid

24-column responsive grid for Kit UI. Mirrors ant-design's <Row> + <Col> API on Angular standalone + signals.

Install

pnpm add @kit-ng-ui/grid @kit-ng-ui/core

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/grid/styles' as grid;

Use

import { KitRowComponent, KitColComponent } from '@kit-ng-ui/grid';

@Component({
  standalone: true,
  imports: [KitRowComponent, KitColComponent],
  template: `
    <kit-row [gutter]="16">
      <kit-col [span]="8">A</kit-col>
      <kit-col [span]="8">B</kit-col>
      <kit-col [span]="8">C</kit-col>
    </kit-row>

    <kit-row [gutter]="[16, 24]" justify="space-between" align="middle">
      <kit-col [xs]="24" [md]="12" [lg]="8">Responsive</kit-col>
      <kit-col [xs]="24" [md]="12" [lg]="8">cells stack</kit-col>
      <kit-col [xs]="24" [md]="24" [lg]="8">below md</kit-col>
    </kit-row>

    <kit-row>
      <kit-col flex="200px">fixed</kit-col>
      <kit-col flex="1 1 auto">fluid</kit-col>
    </kit-row>
  `,
})
export class Demo {}

API

<kit-row>

| Input | Type | Default | Description | | --------- | --------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------- | | gutter | number \| [horizontal, vertical] | 0 | Inner gap between cols. Vertical gap applies only when wrap is enabled. | | justify | 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly' | null | Maps to justify-content. | | align | 'top' \| 'middle' \| 'bottom' \| 'stretch' | null | Maps to align-items. | | wrap | boolean | true | Allow children to wrap onto multiple lines. |

<kit-col>

| Input | Type | Default | Description | | -------- | --------------------- | ------- | -------------------------------------------------------------------- | | span | number \| null | null | Width in 24-column units. 0 hides the col. | | offset | number \| null | null | Left offset in span units. | | order | number \| null | null | Maps to CSS order. | | xs | number \| null | null | Span at the base layer (always applies, ant-design parity). | | sm | number \| null | null | Span ≥ 576px. | | md | number \| null | null | Span ≥ 768px. | | lg | number \| null | null | Span ≥ 992px. | | xl | number \| null | null | Span ≥ 1200px. | | xxl | number \| null | null | Span ≥ 1600px. | | flex | string \| null | null | Raw flex shorthand. Overrides span. |

Behavior notes

• Breakpoints cascade mobile-first: a [xs] value is overridden by a present [md], which is overridden by [lg], and so on.
• [span] is independent of breakpoint props — it always applies. Combine with [md] / [lg] / etc. to layer overrides on top.
• [flex] bypasses the 24-column grid for fixed or fully-fluid cells.
• Object form for breakpoint props (md="{ span: 12, offset: 1 }") plus push / pull are tracked under // TODO(parity).