Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Katana is CSS Layout System made with Flexbox

Minimal flexbox system for making HTML layouts.

  • Minimal. It only 20 lines of .scss.
  • Clear syntax.
  • Responsive.
  • Fluid column.
  • Anything can be personalised.

Katana default values:

  • 12 columns
  • 15 px grid margin
  • 94% main grid size

Basically you can generate any grid with any value or unit you like just change the default numbers in the katana.scss.

The Grid:


Katana Demo

How the CSS class naming system works?

The class names are col-1, col-2 ..

The width value of col-1 is 100%, the value of col-3 is 100/3 = 33,33%, col-5 is 100/5 = 20%.

You also have .fluid column. You can use multiple columns in one row.

Download or Install

You can simply download the library or use:

$ npm i katana.scss

Browser Support

Works in all flex compatible browsers


This project is licensed under the MIT License