Flexit is a lightweight CSS Grid based on Flexbox.
Visit the demo page built entirely using Flexit.
Flexit is in active development:
npm install flexitgrid
yarn add flexitgrid
After installation, you can import the CSS file into your project using this snippet:
You can download the CSS file from here and use it in your HTML as
<link rel="stylesheet" href="flexit.css">
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.