grid3.css

*,*::before,*::after{
    box-sizing: border-box;
    margin-top: 0;
}

body{
    background-color: black;
}

h1{
    color: aquamarine;
}
h3{
    color: bisque;
}
a[href]{
    text-decoration: none;
    color: orange;
}

/*Grid starts here*/
.container{
   display: grid;
   grid-template-columns: repeat(3, 2fr);
   grid-gap: 1em;
}

.box{
    display: grid;
    justify-content: center;
    align-items: center;
    color:orange;
    border: 3px solid blue;
}
/*Screen is divided into 4 fractions. when we type 1/3 we are telling the box to grow from 1st fraction to 3rd fraction*/
.box1{
   grid-row:1/5;
   grid-column:1/3;
}

.box2{
    grid-column: 3;
    grid-row: 1/5;
}

.box3{
    grid-column: 2/5;
    grid-row: 5;
}

.box4{
    border: 3px solid red;
    grid-column: 1;
    grid-row: 2/6;
}