https://github.com/heyheychicken/angular-infinite-grid
Fast and minimalist grid system for your Angular project.
https://github.com/heyheychicken/angular-infinite-grid
angular grid
Last synced: 9 months ago
JSON representation
Fast and minimalist grid system for your Angular project.
- Host: GitHub
- URL: https://github.com/heyheychicken/angular-infinite-grid
- Owner: HeyHeyChicken
- Created: 2022-10-18T16:29:32.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-08T13:04:54.000Z (over 2 years ago)
- Last Synced: 2025-07-08T17:29:28.751Z (9 months ago)
- Topics: angular, grid
- Language: SCSS
- Homepage:
- Size: 491 KB
- Stars: 7
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**Angular-infinite-grid** is fast and minimalist grid system for your Angular project.
## 👋 Introduction
**Angular-infinite-grid** is fast and minimalist grid system for your Angular project.
The philosophy behind Angular-infinite-grid is to provide a lightweight and fast Bootstrap-style grid system.
Your grid is responsive, and you can define the number of columns per line as you wish.
```html
My first col content
My second col content
My third col content
```
## 🔧 Prerequisites
[
Node.js](//nodejs.org/)
[
npm](//npmjs.com/)
[
Angular](//angular.io/)
## ⬇️ Installation
This is a [Node.js](//nodejs.org/en/) module available through the [npm registry](//www.npmjs.com/).
If this is a brand new project, make sure to create an Angular project first with the [`npx ng new myProjectName` command](//angular.io/tutorial/tour-of-heroes/toh-pt0).
Installation is done using the [`npm install` command](//docs.npmjs.com/getting-started/installing-npm-packages-locally):
```console
npm i @heyheychicken/infinite-grid
```
## 💼 Features
- Focus on high performance.
- Text alignment per breakpoint.
```html
...
```
- Use align-self utilities on column items to individually change their alignment on the y-axis.
Choose from the following options: start, end, center, baseline, or stretch (browser default).
```html
...
```
- Customizable number of columns per row.
By default, the number of columns is set to 12.
You can modify it as you wish with the "size" attribute on the "row" element.
```html
...
...
```
## 💻 Compatibility
"Angular-infinite-grid" has only been officially tested on Angular 17.
Created by [Antoine Duval (HeyHeyChicken)](//antoine.cuffel.fr) with ❤ and ☕ (chocolate) in [Mesnil-Panneville](//en.wikipedia.org/wiki/Mesnil-Panneville).