css-grd

Standalone CSS Grid framework built with SCSS

Usage no npm install needed!

<script type="module">
  import cssGrd from 'https://cdn.skypack.dev/css-grd';
</script>

README

css-grd

NPM Downloads

A powerful flex based grid system

Introduction

Fully functional CSS Grid system in 6kb (or 4kb for the lite version).

How to use

Simply include the library

<link rel="stylesheet" href="grd.min.css" />

And use your grid

<div class="grd grd-auto">
  <div>col 1<br />bigger<br />faster<br />stronger</div>
  <div>col 2</div>
  <div>col 3</div>
</div>

Attributes usage

This system use attributes instead of classes to allow for a nicer experience

<div class="grd">
  <div col="6" md="3">col="6" md="3"</div>
  <div col="6" md="3">col="6" md="3"</div>
  <div col="6" md="3">col="6" md="3"</div>
  <div col="6" md="3">col="6" md="3"</div>
</div>

Demo and more

For usage, please look at the demo

See demo.html or https://codepen.io/lekoalabe/pen/xxPrJWr