Minimalist Grid Layout With CSS – dirg.css

Category: CSS & CSS3 , Layout | July 10, 2019
Author: raphaelgoetter
Views Total: 1,081
Official Page: Go to website
Last Update: July 10, 2019
License: MIT


Minimalist Grid Layout With CSS – dirg.css


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 style="--grid-col: 2;">3</div>
  <div style="--grid-order: -1;">4</div>
  <div style="--grid-row: 2;">5</div>



  • Added default values

You Might Be Interested In:

Leave a Reply