Grid module for Angular
CSS grids helpers
[grid]
Directive 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 to1
. -
[cols.xs]
defines the column count beginning with theXS
breakpoint. -
[cols.sm]
defines the column count beginning with theSM
breakpoint. -
[cols.md]
defines the column count beginning with theMD
breakpoint. -
[cols.lg]
defines the column count beginning with theLG
breakpoint. -
[cols.xl]
defines the column count beginning with theXL
breakpoint.
Defining rows:
-
[rows]
defines the base column count (alias for[rows.xs]
), defaults to1
. -
[rows.xs]
defines the column count beginning with theXS
breakpoint. -
[rows.sm]
defines the column count beginning with theSM
breakpoint. -
[rows.md]
defines the column count beginning with theMD
breakpoint. -
[rows.lg]
defines the column count beginning with theLG
breakpoint. -
[rows.xl]
defines the column count beginning with theXL
breakpoint.
Defining gaps:
-
[gap]
defines the base gap in px (alias for[gap.xs]
), defaults to10
. -
[gap.xs]
defines the column count beginning with theXS
breakpoint. -
[gap.sm]
defines the column count beginning with theSM
breakpoint. -
[gap.md]
defines the column count beginning with theMD
breakpoint. -
[gap.lg]
defines the column count beginning with theLG
breakpoint. -
[gap.xl]
defines the column count beginning with theXL
breakpoint.
[gridItem]
Directive 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 to1
. -
[col.span.xs]
defines the column span beginning with theXS
breakpoint. -
[col.span.sm]
defines the column span beginning with theSM
breakpoint. -
[col.span.md]
defines the column span beginning with theMD
breakpoint. -
[col.span.lg]
defines the column span beginning with theLG
breakpoint. -
[col.span.xl]
defines the column span beginning with theXL
breakpoint.
Defining row span:
-
[row.span]
defines the base rowumn span (alias for[row.span.xs]
), defaults to1
. -
[row.span.xs]
defines the rowumn span beginning with theXS
breakpoint. -
[row.span.sm]
defines the rowumn span beginning with theSM
breakpoint. -
[row.span.md]
defines the rowumn span beginning with theMD
breakpoint. -
[row.span.lg]
defines the rowumn span beginning with theLG
breakpoint. -
[row.span.xl]
defines the rowumn span beginning with theXL
breakpoint.
Defining col start:
-
[col.start]
defines the base start column (alias for[col.start.xs]
), defaults to1
. -
[col.start.xs]
defines the start column beginning with theXS
breakpoint. -
[col.start.sm]
defines the start column beginning with theSM
breakpoint. -
[col.start.md]
defines the start column beginning with theMD
breakpoint. -
[col.start.lg]
defines the start column beginning with theLG
breakpoint. -
[col.start.xl]
defines the start column beginning with theXL
breakpoint.
Defining row start:
-
[row.start]
defines the base start rowumn (alias for[row.start.xs]
), defaults to1
. -
[row.start.xs]
defines the start rowumn beginning with theXS
breakpoint. -
[row.start.sm]
defines the start rowumn beginning with theSM
breakpoint. -
[row.start.md]
defines the start rowumn beginning with theMD
breakpoint. -
[row.start.lg]
defines the start rowumn beginning with theLG
breakpoint. -
[row.start.xl]
defines the start rowumn beginning with theXL
breakpoint.