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


Author: vladocar
Views Total: 2,521 views
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>

See also  Accessible CSS Only Toggle Switches

Leave a Reply

Your email address will not be published. Required fields are marked *