Grid pattern

A decorative grid background layer.

Default grid

import { BuiGridPattern } from 'ng-blatui';

<div class="relative overflow-hidden rounded-xl border">
  <bui-grid-pattern />
</div>

Large

Wider cells

<bui-grid-pattern [gap]="48" />

Radial mask fade

<bui-grid-pattern [mask]="true" />

Prop	Type	Default	Description
`gap`	`number`	`24`	Cell size (spacing between grid lines) in pixels.
`lineWidth`	`number`	`1`	Thickness of the grid lines in pixels.
`mask`	`boolean`	`false`	Whether to fade the pattern with a radial mask toward the edges.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.