@heyheychicken/infinite-grid NPM

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

Installation

This is a Node.js module available through the npm registry.

Before installing, download and install Node.js.

If this is a brand new project, make sure to create a package.json first with the npm init command.

Installation is done using the npm install command:

$ npm install @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>

Philosophy

The philosophy behind ng-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.

Contributing

The ng-infinite-grid project welcomes all constructive contributions. Contributions take many forms, from code for bug fixes and enhancements, to additions and fixes to documentation, etc.