THEMETRIAL

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

Author:taskbase
Views Total:0 views
Official Page:Go to website
Last Update:May 3, 2021
License:MIT

Preview:

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

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="https://www.cssscript.com/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>


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.