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.