Css grid:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css grid</title>
</head>
<style>
.container{
border: 2px solid black;
display: grid;
/* height: 100vh;
width: 100vw; */
/* yaaha par column deeclare kar sakte hai aap aur isme naam bhi de sakte hai */
/* grid-template-columns: [first]100px [sec]200px [t]100px;
grid-template-rows: 100px 200px 100px ; */
grid-template-areas: "nav nav nav"
"side arti arti"
"footer footer footer";
/* gap: 2px; */
/* column-gap: 2px;
row-gap: 2px; */
/* justify-items: center;
align-items: center; */
}
.item{
border: 2px solid red;
height: 60px;
/* width: 60px; */
}
.item1{
grid-area: nav;
background-color: red;
/* grid-row:1/2;
grid-column:first/t; */
/* grid-column-start: first;
grid-column-end: t; */
}
.item2{
grid-area: side;
background-color: green;
}
.item3{
grid-area: arti;
background-color: yellow;
}
.item4{
background-color: purple;
grid-area: footer;
}
.item5{
/* item ko overlap bhi kar sakte ho isse */
grid-area: nav;
background-color: aliceblue;
opacity: 0.3;
}
</style>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.