vividvilla / flexit

Responsive grid based on CSS Flexbox

Flexit

Flexit is a lightweight CSS Grid based on Flexbox.

Demo

Visit the demo page built entirely using Flexit.

Quick install

Flexit is in active development:

NPM

npm install flexitgrid

or

Yarn

yarn add flexitgrid

Import

After installation, you can import the CSS file into your project using this snippet:

import 'flexitgrid/dist/flexit.css'

Manual Method

You can download the CSS file from here and use it in your HTML as

<link rel="stylesheet" href="flexit.css">

Clean Syntax

Flexit has simple, human readable classes for naming rows and columns. The class names are intuitive while laying out a grid. For example to have 2 columns occupying 50% of the grid and one column occupying the remaining grid, the HTML would look like:

<div class="row">
    <div class="three columns">
        <p>Content</p>
    </div>
    <div class="three columns">
        <p>Content</p>
    </div>
    <div class="six columns">
        <p>Content</p>
    </div>
</div>

Copyright and license

Code copyright 2018 Karan Sharma. Code released under the MIT license.