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.

swordcss / gridblade

GridBlade

A simple CSS grid framework built with SwordCSS and SCSS

npm install --save gridblade

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 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.