Minimalist Grid Layout With CSS – dirg.css

Preview:

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
• –grid-col-start: start column for element (apply on child). (default value: auto)
• –grid-row-start: start row for element (apply on child). (default value: auto)

<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>

Changelog:

03/11/2020

• added start row/column support

11/13/2019

• CSS updated

07/10/2019

• Added default values