Grid

Grid is a versatile layout to make different sections on a webpage. For now, there are three grid layouts available: two, three & four column layouts. In order to only use the Grid Component from Cascade UI in your project, copy and paste the below code in the head tag of your html document.

                
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/css/foundation.css" />
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/Components/Grid/grid.css" />

Simplified Grid

To use the Simplified Grid you just need to add class name grid to the container or parent element, followed by varient name: one-col, two-col, three-col, or four-col (eg. class="grid three-col"). You can copy the html part from below code snippet and remove all other classes given for showcasing the usage.

Child 1

Child 2

Child 1

Child 2

Child 3

Child 1

Child 2

Child 3

Child 4

                
                    <div class="grid one-col bg-ligth-yellow-color">
                        <div class="p-xs border-black">Child 1</div>
                    </div>
                    <div class="grid two-col bg-ligth-green-color">
                        <div class="p-xs border-black">Child 1</div>
                        <div class="p-xs border-black">Child 2</div>
                    </div>
                    <div class="grid three-col bg-ligth-red-color">
                        <div class="p-xs border-black">Child 1</div>
                        <div class="p-xs border-black">Child 2</div>
                        <div class="p-xs border-black">Child 3</div>
                    </div>
                    <div class="grid four-col bg-ligth-blue-color">
                        <div class="p-xs border-black">Child 1</div>
                        <div class="p-xs border-black">Child 2</div>
                        <div class="p-xs border-black">Child 3</div>
                        <div class="p-xs border-black">Child 4</div>
                    </div>