Getting Started
Layout
Components
Design
Container Grid
A simple grid system is provided to divide the screen into rows and columns. Grid systems are used to create a consistent layout across different screen sizes and devices and can be an effective way to create responsive designs that adjust to the size and orientation of the viewport.
Null JS provides five types of grid system as below:
1- null-container-grid-1
2- null-container-grid-2
3- null-container-grid-3
4- null-container-grid-4
5- null-container-grid-5
By default, on mobile devices, the grid system will show one column.
Note: You need to add ".null-display-grid" to your parent div, this class will give display:grid to your parent element.
- null-container-grid-1
1
2
3
4
5
<div class="null-display-grid null-container-grid-1 null-gap-20">
<div class="null-box-shadow null-border-radius null-padding-20">1</div>
<div class="null-box-shadow null-border-radius null-padding-20">2</div>
<div class="null-box-shadow null-border-radius null-padding-20">3</div>
<div class="null-box-shadow null-border-radius null-padding-20">4</div>
<div class="null-box-shadow null-border-radius null-padding-20">5</div>
</div><!--End null-display-grid-->- null-container-grid-2
1
2
3
4
5
<div class="null-display-grid null-container-grid-2 null-gap-20">
<div class="null-box-shadow null-border-radius null-padding-20">1</div>
<div class="null-box-shadow null-border-radius null-padding-20">2</div>
<div class="null-box-shadow null-border-radius null-padding-20">3</div>
<div class="null-box-shadow null-border-radius null-padding-20">4</div>
<div class="null-box-shadow null-border-radius null-padding-20">5</div>
</div><!--End null-display-grid-->- null-container-grid-3
1
2
3
4
5
<div class="null-display-grid null-container-grid-3 null-gap-20">
<div class="null-box-shadow null-border-radius null-border-radius null-padding-20">1</div>
<div class="null-box-shadow null-border-radius null-border-radius null-padding-20">2</div>
<div class="null-box-shadow null-border-radius null-border-radius null-padding-20">3</div>
<div class="null-box-shadow null-border-radius null-border-radius null-padding-20">4</div>
<div class="null-box-shadow null-border-radius null-border-radius null-padding-20">5</div>
</div><!--End null-display-grid-->- null-container-grid-4
1
2
3
4
5
<div class="null-display-grid null-container-grid-4 null-gap-20">
<div class="null-box-shadow null-border-radius null-padding-20">1</div>
<div class="null-box-shadow null-border-radius null-padding-20">2</div>
<div class="null-box-shadow null-border-radius null-padding-20">3</div>
<div class="null-box-shadow null-border-radius null-padding-20">4</div>
<div class="null-box-shadow null-border-radius null-padding-20">5</div>
</div><!--End null-display-grid-->- null-container-grid-5
1
2
3
4
5
<div class="null-display-grid null-container-grid-5 null-gap-20">
<div class="null-box-shadow null-border-radius null-padding-20">1</div>
<div class="null-box-shadow null-border-radius null-padding-20">2</div>
<div class="null-box-shadow null-border-radius null-padding-20">3</div>
<div class="null-box-shadow null-border-radius null-padding-20">4</div>
<div class="null-box-shadow null-border-radius null-padding-20">5</div>
</div><!--End null-display-grid-->Use our helper classes ".null-gap-[10-50]", to add gap between columns.
- null-gap-10
1
2
3
4
5
<div class="null-display-grid null-container-grid-2 null-gap-10">
<div class="null-box-shadow null-border-radius null-padding-20">1</div>
<div class="null-box-shadow null-border-radius null-padding-20">2</div>
<div class="null-box-shadow null-border-radius null-padding-20">3</div>
<div class="null-box-shadow null-border-radius null-padding-20">4</div>
<div class="null-box-shadow null-border-radius null-padding-20">5</div>
</div><!--End null-display-grid-->- null-gap-20
1
2
3
4
5
<div class="null-display-grid null-container-grid-2 null-gap-20">
<div class="null-box-shadow null-border-radius null-padding-20">1</div>
<div class="null-box-shadow null-border-radius null-padding-20">2</div>
<div class="null-box-shadow null-border-radius null-padding-20">3</div>
<div class="null-box-shadow null-border-radius null-padding-20">4</div>
<div class="null-box-shadow null-border-radius null-padding-20">5</div>
</div><!--End null-display-grid-->- null-gap-30
1
2
3
4
5
<div class="null-display-grid null-container-grid-2 null-gap-30">
<div class="null-box-shadow null-border-radius null-padding-20">1</div>
<div class="null-box-shadow null-border-radius null-padding-20">2</div>
<div class="null-box-shadow null-border-radius null-padding-20">3</div>
<div class="null-box-shadow null-border-radius null-padding-20">4</div>
<div class="null-box-shadow null-border-radius null-padding-20">5</div>
</div><!--End null-display-grid-->- null-gap-40
1
2
3
4
5
<div class="null-display-grid null-container-grid-2 null-gap-40">
<div class="null-box-shadow null-border-radius null-padding-20">1</div>
<div class="null-box-shadow null-border-radius null-padding-20">2</div>
<div class="null-box-shadow null-border-radius null-padding-20">3</div>
<div class="null-box-shadow null-border-radius null-padding-20">4</div>
<div class="null-box-shadow null-border-radius null-padding-20">5</div>
</div><!--End null-display-grid-->- null-gap-50
1
2
3
4
5
<div class="null-display-grid null-container-grid-2 null-gap-50">
<div class="null-box-shadow null-border-radius null-padding-20">1</div>
<div class="null-box-shadow null-border-radius null-padding-20">2</div>
<div class="null-box-shadow null-border-radius null-padding-20">3</div>
<div class="null-box-shadow null-border-radius null-padding-20">4</div>
<div class="null-box-shadow null-border-radius null-padding-20">5</div>
</div><!--End null-display-grid-->