CSS Grids using Gradients Demo

dabblet.css

/* 
CSS Grids using Gradients Demo */

.g1{
background: white;
background-image: linear-gradient(90deg,  
                  rgba(200,0,0,.5) 50%, transparent 0),
                 linear-gradient(rgba(200,0,0,.5) 50%,
                  transparent 0);
                  background-size: 30px 30px;
width: 200px;
height:200px;
margin: 20px;
}

.g2{
background: #58a;
background-image:linear-gradient(white 1px, transparent 0),
   				 linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;
width: 200px;
height:200px;
margin: 20px;
}

.g3{
background: #58a;
background-image:linear-gradient(white 2px, transparent 0), 
                 linear-gradient(90deg, white 2px, transparent 0),
                 linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0), 
                 linear-gradient(90deg, hsla(0,0%,100%,.3) 1px,  transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
width: 200px;
height:200px;
margin: 20px;
}

dabblet.html

<!-- Demo On CSS Grids using Gradients
-->
<div class="g1"></div>
<div class="g2"></div>
<div class=" g3"></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}