Pure CSS Grid System is a lightweight, easy-to-use CSS-only grid system designed for mobile, tablet, and desktop. Fully customizable via SCSS.
css grid layout, css grid 2 columns, grid template columns, can i use css grid, css grid example, css grid responsive
Simple, Lightweight 12-Column Responsive Grid System | tb-grid
How to make use of it:
1. Include the grid.css main CSS file on the web page.
<link rel="stylesheet" href="grid.min.css">
2. Basic HTML structure.
<div class="container">
<div class="row">
<div id="sidebar" class="t2 b3 m-hide"></div>
<div id="content" class="t10 b9">
<div class="row">
<div class="t4 b3"><div class="item">.t4 .b3</div></div>
<div class="t4 b3"><div class="item">.t4 .b3</div></div>
<div class="t4 b3"><div class="item">.t4 .b3</div></div>
<div class="t4 b3"><div class="item">.t4 .b3</div></div>
<div class="t4 b3"><div class="item">.t4 .b3</div></div>
<div class="t4 b3"><div class="item">.t4 .b3</div></div>
<div class="t4 b3"><div class="item">.t4 .b3</div></div>
<div class="t4 b3"><div class="item">.t4 .b3</div></div>
<div class="t4 b3"><div class="item">.t4 .b3</div></div>
<div class="t4 b3"><div class="item">.t4 .b3</div></div>
<div class="t4 b3"><div class="item">.t4 .b3</div></div>
<div class="t4 b3"><div class="item">.t4 .b3</div></div>
</div>
</div>
</div>
</div>3. Customize it via SCSS:
/*
* Setting
*/
$direction : ltr;
$columnsNumber : 12;
$columnsPrefix : '';
// screens | Mobile | Tablet | Browser | Large
$screensNames : ('m', 't', 'b', 'l');
$screensSizes : (0, 768px, 992px, 1200px);
$containerWidth : (100%, 750px, 970px, 1170px);Columns
| Screen | Class Prefix | Screen Size |
|---|---|---|
| Mobile | .m | <768px |
| Tablet | .t | 768px to 991px |
| Browser | .b | 992px to 1199px |
| Large | .l | ≥ 1200px |
| Screen | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Mobile | .m1 | .m2 | .m3 | .m4 | .m5 | .m6 | .m7 | .m8 | .m9 | .m10 | .m11 | .m12 |
| Tablet | .t1 | .t2 | .t3 | .t4 | .t5 | .t6 | .t7 | .t8 | .t9 | .t10 | .t11 | .t12 |
| Browser | .b1 | .b2 | .b3 | .b4 | .b5 | .b6 | .b7 | .b8 | .b9 | .b10 | .b11 | .b12 |
| Large | .l1 | .l2 | .l3 | .l4 | .l5 | .l6 | .l7 | .l8 | .l9 | .l10 | .l11 | .l12 |
Visibility
| Screen | Visible | Hidden |
|---|---|---|
| Mobile | .m-show | .m-hide |
| Tablet | .t-show | .t-hide |
| Browser | .b-show | .b-hide |
| Large | .l-show | .l-hide |
Container Width
| Screen | Screen Width | Container Width |
|---|---|---|
| Large | 1200px or higher | 1170px |
| Browser | 992px to 1199px | 970px |
| Tablet | 768px to 991px | 750px |
| Mobile | Less than 768px | 100% |
Customize by SASS
| Variable | Type | Default Value |
|---|---|---|
| $direction | String | ltr |
| $columnsNumber | Integer | 12 |
| $screensNames | Array | (‘m’, ‘t’, ‘b’, ‘l’) |
| $screensSizes | Array | (0, 768px, 992px, 1200px) |
| $containerWidth | Array | (100%, 750px, 970px, 1170px); |
| $columnsPrefix | String | Empty |
Cross-platform CSS Grid System Plugin/Github
See Demo And Download
Official Website(m-reda): Click Here
This superior jQuery/javascript plugin is developed by m-reda. For extra advanced usage, please go to the official website.
