Tiny 12-column Flexbox Grid – ragrid.css


Author: argyleink
Views Total: 750 views
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>

See also  Animated Retro Button & Frame In Pure CSS - Buttons.css

Leave a Reply

Your email address will not be published. Required fields are marked *