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

Category: CSS & CSS3 , Layout , Recommended | December 20, 2018
Author: vladocar
Views Total: 677
Official Page: Go to website
Last Update: December 20, 2018
License: MIT

Preview:

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

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>

You Might Be Interested In:


Leave a Reply