It is a class used to make a element as grid.

.gridy{display: grid}
                    

It is a class used to make a element as inline-grid. It will take the width and height of parent element.

.inline-gridy{display: inline-grid}
                    

In css.gridy there is set of .child-1 to .child-12 classes used name the child of grid.

.gridy{
    display: grid;
}
.child-1{
  grid: 'child-1';
}

This class used create columns in gridy elements, here you can create 1 to 12 columns. Every columns are 1fr in size.

<div class="gridy no-of-col--1"></div>
<!-- 
Here in this example we will have 1 column in grid
-->

This class used create rows in gridy elements, here you can create 1 to 12 rows. Every rows are 1fr in size.

<div class="gridy no-of-row--1"></div>
<!-- 
Here in this example we will have 1 row in grid
-->

This class used create gaps between a gridy items, here you can create 1 to 5 different gaps. Every gaps are 10px in size different.

<div class="gridy no-of-row--1 gap--1"></div>
<!-- 
Here in this example we will have 1 row in grid
and 10px size gap between items. 
-->

In css.gridy margin and padding are responsive. It has individual selection property for like margin-top, padding-bottom. And it has around 1 to 5 different sizes.

<div class="margin--1"></div>
<!-- 
Here in this example div will
have 10px of margin
-->
<div class="padding-top--2"></div>
<!-- 
Here in this example div will 
have 20px of padding-top
-->

In css.gridy, we can span the gridy items and it make developing complex ui easy.

<div class="gridy
            no-of-row--2
            no-of-col--3
            gap--1">
  <div class="grow-row-1-2
              grow-col-1-1"><div>
  <div class="grow-col-3"><div>
</div>
<!-- 
Here in this example 
we will have 1 grid of 2 rows and 3 columns.
with two child items 
-->