GridBlade
GridBlade is a CSS grid framework created with SCSS and SwordCSS.
It gives a very simple way to create grids. GridBlade doesn't use Flexbox so you can decide the number of columns and rows instead of just the columns.
Usage
Their are 578 CSS classes that you can use. But, of course, you only need 2 classes to create a working grid. You can create a grid with this:
<div class="gb-container-<no. of columns>-<no. of rows>">
<!-- Rows here -->
</div>
To insert an item you just add the class gb-item to your element.
GridBlade
A simple CSS grid framework built with SwordCSS and SCSS
Installation
npm install --save gridblade
Usage
Creating a Grid
The maximum number of columns and the maximum number of rows is 24. You can create a grid with
<div class="gb-grid-<no. of columns>-<no. of rows>"></div>
where you fill in the number of columns and the number of rows.
Creating Items
Creating an item for a grid is relatively simple:
<div class="gb-item">This is an item</div>
You of course have to keep the items inside the grid tag.
Size
GridBlade does have a somewhat large size. It is recommended to optimize it with PurgeCSS and not to just insert it into <head /> tag.
Top comments (1)
Nice some examples for layman like me