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.
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.
A simple CSS grid framework built with SwordCSS and SCSS
npm install --save gridblade
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-container-<no. of columns>-<no. of rows>"></div>
where you fill in the number of columns and the number of rows.
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.
GridBlade does have a somewhat large size. It is recommended to optimize it with PurgeCSS and not to just insert it into
<head /> tag.