Press "Enter" to skip to content

Grid Examples in CSS

Last updated on October 5, 2019

Definition :

       The Css grid layout module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Program 1 :

<html>

  <head>

    <style>

                   .grid-container {

                    display:grid;

                                grid-template-columns: auto auto auto auto;

                                grid-gap:10px;

                                background-color:red;

                                padding:5px;

                                }

                  .grid-container>div {

                  background-color: rgba(255,255,255,0.8);

                  text-align:center;

                  padding:20px 0;

                  font-size:30px;

                  }

                  .item1 {

                  gridarea:2\1\span2\span3;

                  }

                  </style>

                  </head>

                  <body>

                    <div class=”grid-container”>

                                  <div class=”item1″>1</div>

                                  <div class=”item2″>2</div>

                                  <div class=”item3″>3</div>

                                  <div class=”item4″>4</div>

                                  <div class=”item5″>5</div>

                                  <div class=”item6″>6</div>

                                  <div class=”item7″>7</div>

                                  <div clas=”item8″>8</div>

                                 </div>

                </body>

</html>

Program 2 :

<html>

  <head>

    <style>

                   .grid-container {

                    display:grid;

                                grid-template-columns: auto auto auto;

                                grid-gap:10px;

                                background-color:red;

                                padding:5px;

                                }

                  .grid-container>div {

                  background-color: rgba(255,255,255,0.8);

                  text-align:center;

                  padding:20px 0;

                  font-size:30px;

                  }

                  .item1 {

                  gridarea:2\1\span2\span3;

                  }

                  </style>

                  </head>

                  <body>

                    <div class=”grid-container”>

                                  <div class=”item1″>1</div>

                                  <div class=”item2″>2</div>

                                  <div class=”item3″>3</div>

                                  <div class=”item4″>4</div>

                                  <div class=”item5″>5</div>

                                  <div class=”item6″>6</div>

                                 </div>

                </body>

</html>

Program 3 :

<!DOCTYPE html>

<html>

  <head>

    <style>

                  .item1 {grid-area:header;}

                  .item2 {grid-area:menu;}

                  .item3 {grid-area:main;}

                  .item4 {grid-area:right;}

                  .item5 {grid-area:footer;}

                  .grid-container {

                    display:grid;

                                grid-template-areas:

                                  ‘header header header header header header’

                                  ‘menu main main main right right’

                                  ‘menu footer footer footer footer footer’;

                                grid-gap: 10px;

                                background-color:cyan;

                                padding: 10px;

                                }

                                .grid-container > div {

                                 background-color: rgba(255,255,255,0.8);

                                 text-align : center;

                                 padding : 20px 0;

                                 font-size : 30px;

                                 }

                                 </style>

                                 </head>

                                 <body>

                                 <h1> <center> <font color=”red”> Menu Table </font> </center> </h1>

                                   <div class=”grid-container”>

                                   <div class=”item1″>Header</div>

                                   <div class=”item2″>Menu</div>

                                   <div class=”item3″>Main</div>

                                   <div class=”item4″>Right</div>

                                   <div class=”item5″>Footer</div>

                                   </div>

                                   </body>

                                   </html>

Program 4 :

<html>

   <head>

      <meta name=”viewport” content=”width=device-width” initial scale=”1″>

                  <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”>

                  <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”> </script>

                  <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js”> </script>

    </head>

                <body>

                  <div class=”container”>

                   <div class=”row”>

                   <div class=”col-sm-3″ style=”border:1px solid red;”> HELLO </div>

                   <div class=”col-sm-3″ style=”border: 1px solid red;”> HELLO </div>

                   <div class=”col-sm-3″ style=”border: 1px solid red;”> HELLO </div>

                   <div class=”col-sm-3″ style=”border: 1px solid red;”> HELLO </div>

                  </div>

                  <div class=”row”>

                    <div class=”col-sm-6″ style=”border: 1px solid red;”> HELLO2 </div>

                                <div class=”col-sm-6″ style=”border: 1px solid red”> HELLO2 </div>

                  </div>

                  <div class=”row”>

                    <div class=”col-sm-9″ style=”border: 1px solid red”> HELLO3 </div>

                                <div class=”col-sm-3″ style=”border: 1px solid red”> HELLO3 </div>

                  </div>

                </div>

  </body>

</html>

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *