-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgrid.css
More file actions
67 lines (64 loc) · 2.31 KB
/
Copy pathgrid.css
File metadata and controls
67 lines (64 loc) · 2.31 KB
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
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body,html{
height: 100%;
width: 100%;
}
main{
height: 100%;
width: 100%;
display: grid;
grid-template-columns:2fr 1fr 1fr ;
grid-template-rows:1fr 1fr 2fr;
grid-template-areas:"left-top center-top right-top"
"center center-top right-top"
"left-bottom right-bottom right-bottom";
gap: 10px;
padding: 10px;
background-color: black;
}
.left-top{
grid-area: left-top;
background-color: aqua;
background-image: url(https://images.unsplash.com/photo-1493238792000-8113da705763?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mzh8fGNhcnxlbnwwfHwwfHx8MA%3D%3D);
background-size: cover;
background-position: center;
}
.center{
grid-area: center;
background-color: blue;
background-image: url(https://images.unsplash.com/photo-1490274494753-fd4f84681e7c?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=688);
background-size: cover;
background-position: content;
}
.left-bottom{
grid-area: left-bottom;
background-color: brown;
background-image: url(https://images.unsplash.com/photo-1517026575980-3e1e2dedeab4?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzN8fGNhcnxlbnwwfHwwfHx8MA%3D%3D);
background-size: cover;
background-position: cover;
}
.center-top{
grid-area: center-top;
background-color: blueviolet;
background-image: url(https://plus.unsplash.com/premium_photo-1664303847960-586318f59035?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8Y2FyfGVufDB8fDB8fHww);
background-size: cover;
background-position: cover;
}
.right-top{
grid-area: right-top;
background-color: aquamarine;
background-image: url(https://plus.unsplash.com/premium_photo-1683134240084-ba074973f75e?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8Y2FyfGVufDB8fDB8fHww);
background-size: cover;
background-position: cover;
}
.right-bottom{
grid-area: right-bottom;
background-color: chartreuse;
background-image: url(https://plus.unsplash.com/premium_photo-1673971700988-346588461fa7?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjh8fGNhcnxlbnwwfHwwfHx8MA%3D%3D);
background-size: cover;
background-position: cover;
}