https://github.com/zalari/ngx-grid

A grid system for Angular.
https://github.com/zalari/ngx-grid

angular directives grid grid-system

Last synced: 2 months ago
JSON representation

A grid system for Angular.

• Host: GitHub
• URL: https://github.com/zalari/ngx-grid
• Owner: zalari
• License: mit
• Created: 2018-06-05T00:07:04.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-09-21T20:45:00.000Z (over 7 years ago)
• Last Synced: 2025-03-01T11:37:43.480Z (over 1 year ago)
• Topics: angular, directives, grid, grid-system
• Language: TypeScript
• Homepage: https://zalari.github.io/ngx-grid/
• Size: 1.25 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# Grid module for Angular

## CSS grids helpers

### Directive `[grid]`

Creates a CSS grid with the provided column count using CSS custom properties.

#### Defining cols:

* `[cols]` defines the base column count (alias for `[cols.xs]`), defaults to `1`.

* `[cols.xs]` defines the column count beginning with the `XS` breakpoint.

* `[cols.sm]` defines the column count beginning with the `SM` breakpoint.

* `[cols.md]` defines the column count beginning with the `MD` breakpoint.

* `[cols.lg]` defines the column count beginning with the `LG` breakpoint.

* `[cols.xl]` defines the column count beginning with the `XL` breakpoint.

#### Defining rows:

* `[rows]` defines the base column count (alias for `[rows.xs]`), defaults to `1`.

* `[rows.xs]` defines the column count beginning with the `XS` breakpoint.

* `[rows.sm]` defines the column count beginning with the `SM` breakpoint.

* `[rows.md]` defines the column count beginning with the `MD` breakpoint.

* `[rows.lg]` defines the column count beginning with the `LG` breakpoint.

* `[rows.xl]` defines the column count beginning with the `XL` breakpoint.

#### Defining gaps:

* `[gap]` defines the base gap in px (alias for `[gap.xs]`), defaults to `10`.

* `[gap.xs]` defines the column count beginning with the `XS` breakpoint.

* `[gap.sm]` defines the column count beginning with the `SM` breakpoint.

* `[gap.md]` defines the column count beginning with the `MD` breakpoint.

* `[gap.lg]` defines the column count beginning with the `LG` breakpoint.

* `[gap.xl]` defines the column count beginning with the `XL` breakpoint.

### Directive `[gridItem]`

Creates a CSS grid item with the provided column span using CSS custom properties.

**Must** be inside an element with the `grid` directive. 

#### Defining col span:

* `[col.span]` defines the base column span (alias for `[col.span.xs]`), defaults to `1`.

* `[col.span.xs]` defines the column span beginning with the `XS` breakpoint.

* `[col.span.sm]` defines the column span beginning with the `SM` breakpoint.

* `[col.span.md]` defines the column span beginning with the `MD` breakpoint.

* `[col.span.lg]` defines the column span beginning with the `LG` breakpoint.

* `[col.span.xl]` defines the column span beginning with the `XL` breakpoint.

#### Defining row span:

* `[row.span]` defines the base rowumn span (alias for `[row.span.xs]`), defaults to `1`.

* `[row.span.xs]` defines the rowumn span beginning with the `XS` breakpoint.

* `[row.span.sm]` defines the rowumn span beginning with the `SM` breakpoint.

* `[row.span.md]` defines the rowumn span beginning with the `MD` breakpoint.

* `[row.span.lg]` defines the rowumn span beginning with the `LG` breakpoint.

* `[row.span.xl]` defines the rowumn span beginning with the `XL` breakpoint.

#### Defining col start:

* `[col.start]` defines the base start column (alias for `[col.start.xs]`), defaults to `1`.

* `[col.start.xs]` defines the start column beginning with the `XS` breakpoint.

* `[col.start.sm]` defines the start column beginning with the `SM` breakpoint.

* `[col.start.md]` defines the start column beginning with the `MD` breakpoint.

* `[col.start.lg]` defines the start column beginning with the `LG` breakpoint.

* `[col.start.xl]` defines the start column beginning with the `XL` breakpoint.

#### Defining row start:

* `[row.start]` defines the base start rowumn (alias for `[row.start.xs]`), defaults to `1`.

* `[row.start.xs]` defines the start rowumn beginning with the `XS` breakpoint.

* `[row.start.sm]` defines the start rowumn beginning with the `SM` breakpoint.

* `[row.start.md]` defines the start rowumn beginning with the `MD` breakpoint.

* `[row.start.lg]` defines the start rowumn beginning with the `LG` breakpoint.

* `[row.start.xl]` defines the start rowumn beginning with the `XL` breakpoint.