Responsive 12-column Grid System Inspired By Bootstrap – tb-grid

Preview:

Description:

tb-grid is a tiny, modern, responsive, 12-column grid system built using CSS Grid Layout.

Inspired by Bootstrap grid system but more flexible and compact.

How to use it:

1. Install and import the tb-grid into your project.

# NPM
$ npm i tb-grid

import "./tb-grid.scss";

2. Or load the stylesheet tb-grid.css into the document.

<link rel="stylesheet" href="tb-grid.css" />

3. Create a basic grid system:

• tb-grid: required
• tb-grid-gap-20: custom gap between 0 – 50
• tb-grid-xs-X: number of columns (screen size < 576px )
• tb-grid-sm-X: number of columns (screen size > 576px )
• tb-grid-sm-md: number of columns (screen size > 768px )
• tb-grid-lg-X: number of columns (screen size > 992px )
• tb-grid-xl-X: number of columns (screen size >1200px )

<div class="tb-grid tb-grid-gap-20">
  <div class="item tb-grid-sm-6 tb-grid-md-9">
  </div>
  <div class="item tb-grid-sm-6 tb-grid-md-3">
  </div>
  <div class="item tb-grid-sm-4 tb-grid-lg-10 tb-grid-xs-6">
  </div>
  <div class="item tb-grid-sm-8 tb-grid-lg-2 tb-grid-xs-6">
  </div>
    <div class="item tb-grid-sm-5 tb-grid-lg-4 tb-grid-xs-8">
  </div>
  <div class="item tb-grid-sm-7 tb-grid-lg-8 tb-grid-xs-4">
  </div>
</div>

4. Grid in grid is supported as well.

<div class="tb-grid tb-grid-gap-10">
  <div class="item tb-grid-sm-6">
    <div class="tb-grid tb-grid-gap-17">
      <div class="inner-item tb-grid-sm-6 tb-grid-xs-8">
      </div>
      <div class="inner-item tb-grid-sm-6 tb-grid-xs-4">
      </div>
    </div>
  </div>
  <div class="item tb-grid-sm-6">
    <div class="tb-grid tb-grid-gap-5">
      <div class="inner-item tb-grid-sm-8 tb-grid-md-3 tb-grid-xs-2">
      </div>
      <div class="inner-item tb-grid-sm-4 tb-grid-md-9 tb-grid-xs-6">
      </div>
      <div class="inner-item tb-grid-sm-4 tb-grid-md-9 tb-grid-xs-4">
      </div>
      <div class="inner-item tb-grid-sm-8 tb-grid-md-3">
      </div>
    </div>
  </div>
  <div class="item tb-grid-sm-4">
    <div class="tb-grid tb-grid-gap-20">
      <div class="inner-item tb-grid-sm-8 tb-grid-md-3 tb-grid-xs-10">
      </div>
      <div class="inner-item tb-grid-sm-4 tb-grid-md-9 tb-grid-xs-8">
      </div>
      <div class="inner-item tb-grid-sm-4 tb-grid-md-9 tb-grid-xs-6">
      </div>
      <div class="inner-item tb-grid-sm-8 tb-grid-md-3 tb-grid-xs-3">
      </div>
    </div>
  </div>
  <div class="item tb-grid-sm-8 tb-grid tb-grid-gap-5">
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
  </div>
</div>

Changelog:

01/23/2022

• revert the offset example