Tiny Flexbox Grid Layout In Pure CSS – infinity-css-grid

Preview:

Description:

infinity-css-grid is an ultralight (less than 0.1kb ) CSS layout system that helps web developers quickly generate responsive, flexible grid layout using CSS flexbox.

How to use it:

Install & download the infinity-css-grid library.

# NPM
$ npm install infinity-css-grid --save

Import the stylesheet into the document.

<link rel="stylesheet" href="grid.css">

Add as many grid items to the layout.

<div class="row">
  <div class="column">12,5%</div>
  <div class="column">12,5%</div>
  <div class="column">12,5%</div>
  <div class="column">12,5%</div>
  <div class="column">12,5%</div>
  <div class="column">12,5%</div>
  <div class="column">12,5%</div>
  <div class="column">12,5%</div>
</div>

Merge the columns.

<div class="row">
  <div class="merge3">Merge 3 (take 3 places)</div>
  <div class="column">1</div>
  <div class="column">1</div>
  <div class="column">1</div>
</div>

Nested columns are supported as well.

<div class="row">
  <div class="merge4 nested row">
    <div class="column">Nested </div>
    <div class="column">Nested </div>
    <div class="column">Nested  </div>
  </div>
  <div class="column">1</div>
</div>