DEV Community

shadowtime2000
shadowtime2000

Posted on

A Simple CSS Grid Framework

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>
Enter fullscreen mode Exit fullscreen mode

To insert an item you just add the class gb-item to your element.

GitHub logo swordcss / gridblade

A simple CSS framework built with SwordCSS and SCSS

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Supporters

Stargazers repo roster for @swordcss/gridblade

Forkers repo roster for @swordcss/gridblade

Top comments (1)

Collapse
 
manishfoodtechs profile image
manish srivastava

Nice some examples for layman like me