{"id":20872719,"url":"https://github.com/zalari/ngx-grid","last_synced_at":"2026-04-19T16:35:12.123Z","repository":{"id":57170242,"uuid":"136096154","full_name":"zalari/ngx-grid","owner":"zalari","description":"A grid system for Angular.","archived":false,"fork":false,"pushed_at":"2018-09-21T20:45:00.000Z","size":1311,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-01T11:37:43.480Z","etag":null,"topics":["angular","directives","grid","grid-system"],"latest_commit_sha":null,"homepage":"https://zalari.github.io/ngx-grid/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zalari.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-05T00:07:04.000Z","updated_at":"2019-09-30T14:09:26.000Z","dependencies_parsed_at":"2022-08-27T13:11:40.474Z","dependency_job_id":null,"html_url":"https://github.com/zalari/ngx-grid","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zalari%2Fngx-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zalari%2Fngx-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zalari%2Fngx-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zalari%2Fngx-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zalari","download_url":"https://codeload.github.com/zalari/ngx-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243165503,"owners_count":20246721,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","directives","grid","grid-system"],"created_at":"2024-11-18T06:20:25.342Z","updated_at":"2025-12-26T16:57:04.559Z","avatar_url":"https://github.com/zalari.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Grid module for Angular\n\n## CSS grids helpers\n\n### Directive `[grid]`\nCreates a CSS grid with the provided column count using CSS custom properties.\n\n#### Defining cols:\n* `[cols]` defines the base column count (alias for `[cols.xs]`), defaults to `1`.\n* `[cols.xs]` defines the column count beginning with the `XS` breakpoint.\n* `[cols.sm]` defines the column count beginning with the `SM` breakpoint.\n* `[cols.md]` defines the column count beginning with the `MD` breakpoint.\n* `[cols.lg]` defines the column count beginning with the `LG` breakpoint.\n* `[cols.xl]` defines the column count beginning with the `XL` breakpoint.\n\n#### Defining rows:\n* `[rows]` defines the base column count (alias for `[rows.xs]`), defaults to `1`.\n* `[rows.xs]` defines the column count beginning with the `XS` breakpoint.\n* `[rows.sm]` defines the column count beginning with the `SM` breakpoint.\n* `[rows.md]` defines the column count beginning with the `MD` breakpoint.\n* `[rows.lg]` defines the column count beginning with the `LG` breakpoint.\n* `[rows.xl]` defines the column count beginning with the `XL` breakpoint.\n\n#### Defining gaps:\n* `[gap]` defines the base gap in px (alias for `[gap.xs]`), defaults to `10`.\n* `[gap.xs]` defines the column count beginning with the `XS` breakpoint.\n* `[gap.sm]` defines the column count beginning with the `SM` breakpoint.\n* `[gap.md]` defines the column count beginning with the `MD` breakpoint.\n* `[gap.lg]` defines the column count beginning with the `LG` breakpoint.\n* `[gap.xl]` defines the column count beginning with the `XL` breakpoint.\n\n### Directive `[gridItem]`\nCreates a CSS grid item with the provided column span using CSS custom properties.\n\n**Must** be inside an element with the `grid` directive. \n\n#### Defining col span:\n* `[col.span]` defines the base column span (alias for `[col.span.xs]`), defaults to `1`.\n* `[col.span.xs]` defines the column span beginning with the `XS` breakpoint.\n* `[col.span.sm]` defines the column span beginning with the `SM` breakpoint.\n* `[col.span.md]` defines the column span beginning with the `MD` breakpoint.\n* `[col.span.lg]` defines the column span beginning with the `LG` breakpoint.\n* `[col.span.xl]` defines the column span beginning with the `XL` breakpoint.\n\n#### Defining row span:\n* `[row.span]` defines the base rowumn span (alias for `[row.span.xs]`), defaults to `1`.\n* `[row.span.xs]` defines the rowumn span beginning with the `XS` breakpoint.\n* `[row.span.sm]` defines the rowumn span beginning with the `SM` breakpoint.\n* `[row.span.md]` defines the rowumn span beginning with the `MD` breakpoint.\n* `[row.span.lg]` defines the rowumn span beginning with the `LG` breakpoint.\n* `[row.span.xl]` defines the rowumn span beginning with the `XL` breakpoint.\n\n#### Defining col start:\n* `[col.start]` defines the base start column (alias for `[col.start.xs]`), defaults to `1`.\n* `[col.start.xs]` defines the start column beginning with the `XS` breakpoint.\n* `[col.start.sm]` defines the start column beginning with the `SM` breakpoint.\n* `[col.start.md]` defines the start column beginning with the `MD` breakpoint.\n* `[col.start.lg]` defines the start column beginning with the `LG` breakpoint.\n* `[col.start.xl]` defines the start column beginning with the `XL` breakpoint.\n\n#### Defining row start:\n* `[row.start]` defines the base start rowumn (alias for `[row.start.xs]`), defaults to `1`.\n* `[row.start.xs]` defines the start rowumn beginning with the `XS` breakpoint.\n* `[row.start.sm]` defines the start rowumn beginning with the `SM` breakpoint.\n* `[row.start.md]` defines the start rowumn beginning with the `MD` breakpoint.\n* `[row.start.lg]` defines the start rowumn beginning with the `LG` breakpoint.\n* `[row.start.xl]` defines the start rowumn beginning with the `XL` breakpoint.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzalari%2Fngx-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzalari%2Fngx-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzalari%2Fngx-grid/lists"}