Get Started

Components

Grids

Grids are basically used for laying out contents in multiple rows and columns. It offers a two dimensional layout system for the web.

Two Items in a Grid

Item1
Item2
Item3
Item4
                               
                            <div class="grid-container">
                                <div class="grid-child">Item1</div>
                                <div class="grid-child">Item2</div>
                                <div class="grid-child">Item3</div>
                                <div class="grid-child">Item4</div>
                            </div>

Three items in a grid

Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9
                               
                            <div class="grid-three-container">
                                <div class="grid-child">Item1</div>
                                <div class="grid-child">Item2</div>
                                <div class="grid-child">Item3</div>
                                <div class="grid-child">Item4</div>
                                <div class="grid-child">Item5</div>
                                <div class="grid-child">Item6</div>
                                <div class="grid-child">Item7</div>
                                <div class="grid-child">Item8</div>
                                <div class="grid-child">Item9</div>
                            </div>
Snackbar