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.

<container>
  <row>
    <column [xs]="12" [sm]="4" [md]="6" [lg]="5" [xl]="4" [xxl]="3">
      My first col content
    </column>
    <column [xs]="'auto'" text_lg="start">
      My second col content
    </column>
    <column [xs]="12" [sm]="4" [md]="2">
      My third col content
    </column>
  </row>
</container>

🔧 Prerequisites

Node.js
npm
Angular

⬇️ Installation

This is a Node.js module available through the npm registry.
If this is a brand new project, make sure to create an Angular project first with the npx ng new myProjectName command.
Installation is done using the npm install command:

npm i @heyheychicken/infinite-grid

💼 Features

• Focus on high performance.
• Text alignment per breakpoint.

<container>
  <row>
    <column [text_xs]="'start'" [text_md]="'center'" [text_xl]="'end'">
      ...
    </column>
  </row>
</container>

• 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).

<container>
  <row>
    <column [align_self_sm]="'start'" [align_self_lg]="'baseline'" [align_self_xxl]="'end'">
      ...
    </column>
  </row>
</container>

• 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.

<container>
  <row [size]="24">
    <column [xs]="16">
      ...
    </column>
    <column [xs]="8">
      ...
    </column>
  </row>
</container>

💻 Compatibility

"Angular-infinite-grid" has only been officially tested on Angular 17.

Created by Antoine Duval (HeyHeyChicken) with ❤ and ☕ (chocolate) in Mesnil-Panneville.