layout-task/grid.css at main · kandan200/layout-task · 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
*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(17, 1, 1);
    display: grid;
    place-items: center;
    min-height: 100vh;
}

main{
    display: grid;
    grid-template-areas:
    'a a a b b'
    'a a a b b'
    'c c d d d'
    'c c e e e'
    ;

    gap: 10px;
    width: 50%;
    margin: auto;

}
main div{
    padding: 2cm;
    text-align: center;
    border-radius: 5px;

}
#a{
    background-color: rgb(255, 81, 0);
    grid-area: a;
}
#b{
    background-color:rgb(255, 174, 0);
    grid-area: b;

}
#c{
    background-color: rgb(6, 122, 6);
    grid-area: c;
}
#d{
    background-color: rgb(24, 177, 216);
    grid-area: d;
}
#e{
    background-color: rgb(24, 177, 216);
    grid-area: e;
}