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.