Author: | argyleink |
---|---|
Views Total: | 754 views |
Official Page: | Go to website |
Last Update: | April 14, 2017 |
License: | MIT |
Preview:

Description:
The ragrid.css provides an easy and convenient way to create a responsive, flexbox-based grid layout for your modern web project. Fully customizable via attributes instead of CSS classes.
Install the ragrid.css:
# Yarn yarn add ragrid # NPM $ npm install ragrid
How to use it:
Import the ragrid.css into your project.
<link rel="stylesheet" href="css/ragrid.css">
Create a basic flexbox grid as this:
<section grid> ... </section>
Set the alignment using the following attributes:
- horizontally-aligned: left, center, right
- vertically-aligned: top, center, bottom, baseline
<section grid horizontally-aligned="right" vertically-aligned="top"> ... </section>
Set the distribution:
- horizontally-distributed: between, around, equal
- vertically-distributed: between, equal,
<section grid horizontally-distributed="equal" vertically-distributed="around"> ... </section>