It is based on flex system, simple, responsive and it is compatible with RTL direction.

Null JS provides five types of layout as below:

1- null-layout-100

2- null-layout-50-50

3- null-layout-25-75

4- null-layout-75-25

5- null-layout-25-50-25

Note: You need to add ".null-display-flex" to your parent div, this class will give display:flex to your parent element.

- null-layout-100

<div class="null-display-flex null-layout-100 null-gap-20">

<div class="null-box-shadow null-border-radius null-padding-20">100%</div>

</div><!-- End null-display-flex -->

- null-layout-50-50

<div class="null-display-flex null-layout-50-50 null-gap-20">

<div class="null-layout-50"><div class="null-box-shadow null-border-radius null-padding-20">50%</div></div>
<div class="null-layout-50"><div class="null-box-shadow null-border-radius null-padding-20">50%</div></div>

</div><!-- End null-display-flex -->

- null-layout-75-25

<div class="null-display-flex null-layout-75-25 null-gap-20">

<div class="null-layout-75"><div class="null-box-shadow null-border-radius null-padding-20">75%</div></div>
<div class="null-layout-25"><div class="null-box-shadow null-border-radius null-padding-20">25%</div></div>

</div><!-- End null-display-flex -->

- null-layout-25-75

<div class="null-display-flex null-layout-25-75 null-gap-20">

<div class="null-layout-25"><div class="null-box-shadow null-border-radius null-padding-20">25%</div></div>
<div class="null-layout-75"><div class="null-box-shadow null-border-radius null-padding-20">75%</div></div>

</div><!-- End null-display-flex  -->

- null-layout-25-50-25

<div class="null-display-flex null-layout-25-50-25 null-gap-20">

<div class="null-layout-25"><div class="null-box-shadow null-border-radius null-padding-20">25%</div></div>
<div class="null-layout-50"><div class="null-box-shadow null-border-radius null-padding-20">50%</div></div>
<div class="null-layout-25"><div class="null-box-shadow null-border-radius null-padding-20">25%</div></div>

</div><!-- End null-display-flex -->

Use our helper classes ".null-gap-[10-50]", to add gap between columns.

- null-gap-10

<div class="null-display-flex null-layout-50-50 null-gap-10">

<div class="null-layout-50"><div class="null-box-shadow null-border-radius null-padding-20">50%</div></div>
<div class="null-layout-50"><div class="null-box-shadow null-border-radius null-padding-20">50%</div></div>

</div><!-- End null-display-flex -->

- null-gap-20

<div class="null-display-flex null-layout-50-50 null-gap-20">

<div class="null-layout-50"><div class="null-box-shadow null-border-radius null-padding-20">50%</div></div>
<div class="null-layout-50"><div class="null-box-shadow null-border-radius null-padding-20">50%</div></div>

</div><!-- End null-display-flex -->

- null-gap-30

<div class="null-display-flex null-layout-50-50 null-gap-30">

<div class="null-layout-50"><div class="null-box-shadow null-border-radius null-padding-20">50%</div></div>
<div class="null-layout-50"><div class="null-box-shadow null-border-radius null-padding-20">50%</div></div>

</div><!-- End null-display-flex -->

- null-gap-40

<div class="null-display-flex null-layout-50-50 null-gap-40">

<div class="null-layout-50"><div class="null-box-shadow null-border-radius null-padding-20">50%</div></div>
<div class="null-layout-50"><div class="null-box-shadow null-border-radius null-padding-20">50%</div></div>

</div><!-- End null-display-flex -->

- null-gap-50

<div class="null-display-flex null-layout-50-50 null-gap-50">

<div class="null-layout-50"><div class="null-box-shadow null-border-radius null-padding-20">50%</div></div>
<div class="null-layout-50"><div class="null-box-shadow null-border-radius null-padding-20">50%</div></div>

</div><!-- End null-display-flex -->

Use class ".null-layout-sticky" if you want to make of the layout or its children fixed on scrolling:

<div class="null-layout-[] null-layout-sticky"></div>

The default value for align-items property in flexbox is stretch. This means that if the align-items property is not explicitly set, the flex items will stretch to fill the height of the flex container along the cross-axis.

Use our flex helper classes to align items your children layout: