Minimalist Grid Layout With CSS – dirg.css

In Articles, Sticky Header, Web Design Nov 12, 2017
Minimalist Grid Layout With CSS – dirg.css

dirg.css is an especially light-weight (~1kb) CSS library which helps you shortly render a responsive grid format utilizing CSS Grid Structure properties.

Learn how to use it:

Obtain and place the dirg.css within the header of the html web page.

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

Create and config the grid format utilizing the next kinds:

  • –grid-number: variety of columns
  • –grid-gutter: house between grid objects
  • –grid-col: variety of youngster columns
  • –grid-order: customized order
  • –grid-row: variety of rows
<div class="DIRG" type="--grid-number: three; --grid-gutter: 1rem;"> <div>1</div> <div>2</div> <div type="--grid-col: 2;">three</div> <div type="--grid-order: -1;">four</div> <div type="--grid-row: 2;">5</div> <div>6</div> <div>7</div> </div>

The put up Minimalist Grid Structure With CSS – dirg.css appeared first on CSS Script.

Supply hyperlink

Leave a Reply

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