Site icon DataFlair

CSS Grid Layout Module

Full Stack Web Development Courses with Real-time projects Start Now!!

Program 1

<html>
    <head>
        <style>
            
            .grid-container{
                display:grid;
                grid-template-columns: 10% 10%;
                background-color:aqua;
                gap:50px 50px;
            }

            .grid-container>div{
                background-color:aquamarine;
                padding:30px;
            }
            
            /*.grid-item{
                background-color:aquamarine;
                padding:30px;
            }*/
        </style>
    </head>
    <body>
       <!-- <div class="grid-container">
            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>
            <div class="grid-item">7</div>
            <div class="grid-item">8</div>

        </div>-->

        
    </body>
</html>

 

Exit mobile version