suretrust-cssgrids_practicework/index3.html at main · Samyu09/suretrust-cssgrids_practicework · 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
<!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>
    <style>
        .wrapper{
            display:grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-auto-rows:minmax(100px,auto);
            grid-gap:2em;
            justify-items: stretch;
            align-items:stretch;

        }
        .wrapper div{
            background:gray;
            padding:1em;
        }
        .wrapper div:nth-child(odd){
            background:darkseagreen;

        }
        .box1{
          /* align-self:start;*/
          grid-column: 1/3;
          grid-row:1/3;
        }
        .box2{
          /* align-self:end;*/
          grid-row:1/3;
        }
        .box4{
            grid-column:1/2;
            grid-row:2/4;
            border-style:solid;
            border-color:darkblue;
        }
        .box3{
            /*grid-column:1;
            grid-row:3/4;*/
            grid-column:2;


        }


    </style>
</head>
<body>

    <div class="wrapper">
        <div class="box box1">Box1 </div>
        <div class="box box2">Box2 </div>
        <div class="box box3" >Box3 </div>
        <div class="box box4">Box4 </div>
        <div> Box5</div>

    </div>

</body>
</html>