Composable CSS grid layout component
CngxGrid
ComponentPrimaryOnPushv0.1.0
projects/ui/layout/grid.component.ts
Import#
import { CngxGrid } from '@cngx/ui/layout'
Description#
Composable CSS grid layout component.
<cngx-grid columns="3" gap="16px">
<div>Cell 1</div>
<div>Cell 2</div>
</cngx-grid>columns accepts either a positive integer for the
repeat(N, 1fr) shortcut or any grid-template-columns value
("200px 1fr", "repeat(auto-fit, minmax(120px, 1fr))").
Bare attribute syntax works for both forms: columns="3" and
[columns]="3" produce identical output.
Metadata#
Host#
Index#
Inputs#
columns#
number | string, number | stringinput()
Number of equal columns, or a custom grid-template-columns value.
default
1, { transform: coerceColumns, }Instance Properties#
gap#
unknowninput()Readonly
CSS gap between cells. The default reads the --cngx-gap-md override
hook and falls back to the density scale (--cngx-space-md), so a root
[data-density] swap rescales the grid; any CSS gap value is accepted.
input('var(--cngx-gap-md, var(--cngx-space-md, 16px))')HostBindings#
| Binding | Expression |
|---|---|
[style.grid-template-columns] | gridTemplateColumns() |
[style.gap] | gap() |