Tiny 12-column Flexbox Grid – ragrid.css

Category: CSS & CSS3 , Layout , Recommended | April 14, 2017
Author: argyleink
Views Total: 1,229
Official Page: Go to website
Last Update: April 14, 2017
License: MIT

Preview:

Tiny 12-column Flexbox Grid – ragrid.css

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>

Leave a Reply