@marxlnfcs/ngx-grid NPM

ngx-grid

Installation

npm i @marxlnfcs/ngx-grid

Usage

Module:

Import NgxGridModule from @marxlnfcs/ngx-grid

import { NgxGridModule } from '@marxlnfcs/ngx-grid-alt';

@NgModule({
  imports: [
    NgxGridModule.forRoot({ ... })
  ]
})

Grid component

Simple component to build a dynamic and easy to use grid layout

<ngx-grid>
  <ngx-grid-column>...</ngx-grid-column>
  <ngx-grid-column>...</ngx-grid-column>
  <ngx-grid-group>
    <ngx-grid-column>...</ngx-grid-column>
    <ngx-grid-column>...</ngx-grid-column>
  </ngx-grid-group>
</ngx-grid>

Options for Grid component: `<ngx-grid>`

strategy - Defines the strategy of the grid component. SCREEN uses the media queries and CONTAINER uses the container queries which is experimental, Possible values: screen, container
baseBreakpoint - Defines the base breakpoint of this component. (default is xs), Possible values: xs, sm, md, lg, xl, 2xl, 3xl, 4xl
baseSize - Defines the default column size of the grid. (default is 12), Possible values: 2, 4, 6, 8, 10, 12
gap - Sets the spacing between all columns and rows. (default is 1rem)
columnGap - Sets the spacing between all columns. (default is the value of the gap option)
rowGap - Sets the spacing between all rows. (default is the value of the gap option)
autoRows - Whether to use the grid-auto-rows feature. (default is false)
rows - Accepts a list of strings to define the size of each row statically. (default is null)

Options for the grid column directive: `<ngx-grid-column>`

For every directive there are multiple size, offset and order options for each breakpoint. The [size], [offset] and [order] input uses the current base breakpoint.

Breakpoints: xs, sm, md, lg, xl, 2xl, 3xl and 4xl Sizes: 1-12 Offset sizes: 2, 4, 6, 8, 10

size - Sets the width (1-12) of the column. (default is 12)
*:size - Sets the width (1-12) of the column. (default is 12)
offset - Sets the distance from the left. (default is null)
*:offset - Sets the distance from the left. (default is null)
order - Sets the position of the column. (default is null)
*:order - Sets the position of the column. (default is null)

Options for the grid group directive: `<ngx-grid-group>`

For every directive there are multiple size, offset and order options for each breakpoint. The [size], [offset] and [order] input uses the current base breakpoint.

Breakpoints: xs, sm, md, lg, xl, 2xl, 3xl and 4xl Sizes: 1-12 Offset sizes: 2, 4, 6, 8, 10

gap - Sets the spacing between all columns and rows. (default is 1rem)
columnGap - Sets the spacing between all columns. (default is the value of the gap option)
rowGap - Sets the spacing between all rows. (default is the value of the gap option)
autoRows - Whether to use the grid-auto-rows feature. (default is true)
rows - Accepts a list of strings to define the size of each row statically. (default is null)
size - Sets the width (1-12) of the column. (default is 12)
*:size - Sets the width (1-12) of the column. (default is 12)
offset - Sets the distance from the left. (default is null)
*:offset - Sets the distance from the left. (default is null)
order - Sets the position of the column. (default is null)
*:order - Sets the position of the column. (default is null)

Grid centered component

Simple component to center a specific size of container

<ngx-grid-centered>
  ...
</ngx-grid-centered>

Options for the grid centered component: `<ngx-grid-centered>`

For every breakpoint, there is a native size option. The [size] input uses the current base breakpoint.

Breakpoints: xs, sm, md, lg, xl, 2xl, 3xl and 4xl Sizes: 1-12

size - Sets the width (1-12) of the column. (default is 12)
*:size - Sets the width (1-12) of the column. (default is 12)
autoRows - Whether to use the grid-auto-rows feature. (default is false)

*ngxScreenSize structural directive

Structural directive to add/remove an element if the defined breakpoint fits.

<div *ngxScreenSize"'xs'">
...
</div>

.class and .style directive

Directive to add classes and/or styles based on the breakpoint

<div
  [xs.class]="'class1, class2'"
  [xs.class]="['class1', 'class2']"
  [xs.class]="{ class1: true, class2: true }"

  [xs.style]="'display: none; color: black;'"
  [xs.style]="['display: none', 'color: black; background-color: green;']"
  [xs.style]="{ 'display': 'none', 'color': 'black' }"
>
  ...
</div>

Global Options

In the forRoot method when importing the grid module in the app module you can specify the following options that will be globally applied to all grid instances.

strategy - Defines the strategy of the grid component. SCREEN uses the media queries and CONTAINER uses the container queries which is still experimental, Possible values: screen, container
baseBreakpoint - Defines the base breakpoint of this component. (default is xs), Possible values: xs, sm, md, lg, xl, 2xl, 3xl, 4xl
baseSize - Defines the default column size of the grid. (default is 12), Possible values: 2, 4, 6, 8, 10, 12
gap - Sets the spacing between all columns and rows. (default is 1rem)
columnGap - Sets the spacing between all columns. (default is the value of the gap option)
rowGap - Sets the spacing between all rows. (default is the value of the gap option)
autoRows - Whether to use the grid-auto-rows feature. (default is false)
breakpoints - Key-Value object with name of breakpoint as key and minWidth as number