CngxGrid

ComponentPrimaryOnPushv0.1.0

projects/ui/layout/grid.component.ts

Info
API

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#

Selector: cngx-grid
Change detection: ChangeDetectionStrategy.OnPush

Host#

Bound styles: grid-template-columns ← gridTemplateColumns gap ← gap

Index#

Inputs

columns gap

HostBindings

style.grid-template-columns style.gap

Inputs#

columns#number | string, number | string

input()

Number of equal columns, or a custom grid-template-columns value.

default 1, { transform: coerceColumns, }

gap#