Minimalist Grid Layout With CSS – dirg.css

Category: CSS & CSS3 , Layout | November 12, 2017
Author: raphaelgoetter
Views Total: 57
Official Page: Go to website
Last Update: November 12, 2017
License: MIT

Preview:

Minimalist Grid Layout With CSS – dirg.css

Description:

dirg.css is an extremely lightweight (~1kb) CSS library which helps you quickly render a responsive grid layout using CSS Grid Layout properties.

How to use it:

Download and place the dirg.css in the header of the html page.

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

Create and config the grid layout using the following styles:

  • –grid-number: number of columns
  • –grid-gutter: space between grid items
  • –grid-col: number of child columns
  • –grid-order: custom order
  • –grid-row: number of rows
<div class="DIRG" style="--grid-number: 3; --grid-gutter: 1rem;">
  <div>1</div>
  <div>2</div>
  <div style="--grid-col: 2;">3</div>
  <div style="--grid-order: -1;">4</div>
  <div style="--grid-row: 2;">5</div>
  <div>6</div>
  <div>7</div>
</div>