Sigma-Web-Development-Course/index39.html at main · param-code/Sigma-Web-Development-Course · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!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>
    <!-- <style> -->
        body{
            background-color: pink;
        }
        .container{
            width: 80vw;
            height: 300px;
            border: 2px solid brown;
            display: grid;
            grid-template-areas: "nav nav nav"
                                "side article article"
                                "footer footer footer";
        }
        .item{
            border: 2px solid blue;
        }
        .item1{
            grid-area: nav;
            background-color: rgb(73, 73, 117);
        }
        .item2{
            grid-area: side;
            background-color: aquamarine;
        }
        .item3{
            grid-area: article;
            background-color: greenyellow;
        }
        .item4{
            grid-area: footer;
            background-color: orangered;
        }
        .item5{
            grid-area: nav;
        }
    </style>
    <style>
        body{
            background-color: pink;
        }
        .container{
            width: 80vw;
            border: 2px solid black;
            display: grid;
            /* grid-template-columns: [pehla]120px [dusra]100px [t]; */
            grid-template-columns: 1fr 1fr 1fr; /*mtlb total available width ka 1fraction krke.. yani ki teeno 1/3 .. 1/3 krke baant jayega */
            grid-template-rows: 100px 100px 100px;
            /* grid-template-columns: repeat(4,1fr); 1fr ko 4 baar repeat kr dega jaise 1fr upar wale mein 3 baar likha h waisa hi */
            /* grid-template-columns: repeat(4,minmax(100px,1fr)); minmax mein min 100px aur 1fr max hoga aisa likha hua h */
            grid-template-rows: repeat(2,80px);
            gap: 30px;
            justify-content: center; /* apne cell mein center ho jayega */
            align-items: center;
            place-content: center;/* iska mtlb align content and justify content dono */
        }
        .item{
            border: 2px solid red;
            height: 55px;
            /* width: 55px;  */
        }
        .item4{
            grid-row: 1/2;/*is position pe jayega grid line pe , ye co-ordinate jaisa h*/
            grid-column: dusra/t;
        }
        .item1{ /* 4 aur 1 overlap kr jayega */
            grid-row: 1/2;/*is[1 se lekar-2 tk] position pe jayega grid line pe , ye co-ordinate jaisa h*/
            grid-row-start: 1;
            grid-row-end: 2; /* this and the above one combined is similar to grid-row above*/
            grid-column: 1/2;
        }
    </style>
</head>
<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>