Important Links

Get Started

Components

Avatar Alert Badge Button Cards Image Input Texts Utilites List Navigation Rating Snackbar Grid Modal

Home Components Grid

Grid

Grid allows us to organize web app in structured manner.

Usages

Item 1

Item 2

This is the 2x2 Grid, which is used to align 2 items in row.

                
                  < -- For 2x2 Grid -->
                  

              <div class="grid grid-2" > 

                <div class="grid-item text-white">Item 1 </div> 

                <div class="grid-item text-white">Item 2 </div> 

              </div>

3x3 Grid

This is the 3x3 Grid, which is used to align 3 items in row.

Usages

Item 1

Item 2

To achieve the above Grid design, you need to follow the following code:

                
                  < -- For Text with Image -->
                  

              <div class="grid grid-3" > 

                <div class="grid-item text-white">Item 1 </div> 

                <div class="grid-item text-white">Item 2 </div> 

                <div class="grid-item text-white">Item 3 </div> 

              </div>

Snackbar

Modal