Author: | taskbase |
---|---|
Views Total: | 658 views |
Official Page: | Go to website |
Last Update: | January 23, 2022 |
License: | MIT |
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