What Is Css Grid | Best Way To Use CSS Grid

1
Responsive Website Layout With CSS Grid

In This Post We Are Going To Talk About CSS Grid Layout And How To Use Css Grid With The Best Way. We Going To Learn All The Important Topics About Css Grid. And We Will Also Create A Responsive Website Layout With CSS Grid. So Let’s Begin.

What IS CSS Grid

The CSS Grid Layout is a grid-based layout system, In CSS Grid We Use rows and columns To Make Our Web Page, rows and columns Make it easier to design web pages without having to use floats and positioning And Any other Css Property.

Browser Support For CSS Grid

  1. Chrome -57.0
  2. Microsoft Edge  – 16.0
  3. Mozilla Firefox – 52.0
  4. Apple’s Safari – 10
  5. Opera – 44

What Is Row And Column

Before We Learn About Css Grid We Should Learn About Row And Column. And See How Row And Column Work And Make grid layout. Here Is A Example Image.

What Is Column In Css grid
What Is Row In Css grid

Css Grid Property

#main{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 70px auto 250px;
    grid-template-areas: "header header header"
                          "body body sidbar"
                          "box1 box2 box3";
    gap: 14px;
}
.header{
    grid-area: header;
    background-color: #5271FF;
}
.body {
    height: 500px;
    grid-area: body;
    background-color: #FFDE59;
}
.sidbar{
    grid-area: sidbar;
    background-color: #38B6FF;
}
.box1{
    grid-area: box1;
    background-color: #5271FF ;
}
.box2{
    grid-area: box2;
    background-color:#5271FF ;
}
.box3{
    grid-area: box3;
    background-color:#5271FF ;
}

In This Code Example We Can See For Using Css Grid You Have To Use This Property And Here IS The Steps

  • 1st Add Display Property As grid
  • 2nd Add Template Column And Row According to your design
  • 3rd Tell Area Property What You Want In Your Every Cells.

Responsive Website Layout With CSS Grid

Html Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid</title>
    <link type="text/css" href="style.css" rel="stylesheet" >
</head>
<body>
    <div id="main">
        <div class="header">

        </div>
        <!-- body -->
        <div class="body">

        </div>

        <!-- sidebar -->
        <div class="sidbar">

        </div>

        <div class="box1">

        </div>
        <div class="box2">

        </div>
        <div class="box3">

        </div>
    </div>
</body>
</html>

CSS Code

body{
    margin: 0;
    padding: 0;
    background-color: #fff;
}
#main{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 70px auto 250px;
    grid-template-areas: "header header header"
                          "body body sidbar"
                          "box1 box2 box3";
    gap: 14px;
}
.header{
    grid-area: header;
    background-color: #5271FF;
}
.body {
    height: 500px;
    grid-area: body;
    background-color: #FFDE59;
}
.sidbar{
    grid-area: sidbar;
    background-color: #38B6FF;
}
.box1{
    grid-area: box1;
    background-color: #5271FF ;
}
.box2{
    grid-area: box2;
    background-color:#5271FF ;
}
.box3{
    grid-area: box3;
    background-color:#5271FF ;
}

@media only screen and (max-width: 600px) {
    #main{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 70px auto  250px 250px 250px 250px;
        grid-template-areas: "header"
                              "body"
                              "sidbar"
                              "box1"
                               "box2"
                               "box3";
        gap: 14px;
    }
    .header{
        grid-area: header;
        background-color: #5271FF;
    }
    .body {
        height: 500px;
        grid-area: body;
        background-color: #FFDE59;
    }
    .sidbar{
        grid-area: sidbar;
        background-color: #38B6FF;
    }
    .box1{
        grid-area: box1;
        background-color: #5271FF ;
    }
    .box2{
        grid-area: box2;
        background-color:#5271FF ;
    }
    .box3{
        grid-area: box3;
        background-color:#5271FF ;
    }
}

For More Info And Understanding Watch This Video Here.

Hey, I Am Rohit And I Really Love Write About Coding And Teaching About Programming. Currently I Am Doing B.Tech In Computer Science. And I Also Love Have Fun With Friends. You Can Find On Instagram.

1 COMMENT

Leave a Reply to kashish Cancel reply

Please enter your comment!
Please enter your name here