DIRG is a pure CSS ultra-light Grid Framework

DIRG is a pure CSS ultra-light Grid Framework

DIRG is a pure CSS ultra-light Grid Framework

DIRG

DIRG is a pure CSS ultra-light Grid Framework

Install

nodeJS jQuery JavaScript Sass

Just use dirg.min.css (429 Bytes)

Howto?

Add a .DIRG class on a parent to create a new grid.

Then, use the style= HTML attribute just to change the variables values either on parent or some children.

Example :

<div class="DIRG" style="--grid-number: 3; --grid-gutter: 1rem;">

will design a 3 columns grid with a 1rem gutter between children.

Variables

  • --grid-number: number of columns inside the grid. (apply on parent) (default value: auto)
  • --grid-gutter gutter size between children. (apply on parent) (default value: 0)
  • --grid-col column spanning (apply on child). (default value: 1)
  • --grid-row row spanning (apply on child). (default value: 1)
  • --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)
  • --grid-order affects visual order of element (apply on child). (default value: 0, change to -1 to appear first, or 1 to appear last)

FAQ

But inline style= is bad!

Nah. Inline styles are bad, right. Here, you just change the value of a variable. No real properties will be hurt.

Compatibility

Licence

WTFPL http://www.wtfpl.net/

Full Example

<div class="DIRG" style="--grid-number: 3; --grid-gutter: 1rem;">
  <div>1</div>
  <div>2</div>
  <div style="--grid-col: 2;">3</div>
  <div>4</div>
  <div style="--grid-row: 2;">5</div>
  <div>6</div>
  <div>7</div>
</div>

result

Download Details:

Author: raphaelgoetter

Live Demo: https://codepen.io/raphaelgoetter/pen/XzdeRe?editors=1100

GitHub: https://github.com/raphaelgoetter/dirg

css programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

How to use animate css tutorial with examples - Duomly Blog - Programming courses online

In this article I'd like to show you how to use animate css library to get add stunning animations to your page or application. Animate CSS is a great ...

Learn to use variables in CSS (CSS Tricks)

whats the variable in CSS, how to declare use them. Whats the benefit of variables in CSS. Lets learn all this. #Variables #CSS #HTML #CssVariables #ITArticles

60+ Responsive Professional CSS Blocks For Tailwind.css

tailblocks 60+ Responsive Professional CSS Blocks For Tailwind.css Ready-to-use Tailwind CSS blocks