-
Notifications
You must be signed in to change notification settings - Fork 0
/
grid2.html
122 lines (106 loc) · 3.32 KB
/
grid2.html
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="pt-br">
<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" />
<meta name="author" content="Wesley Victor Pereira Silva" />
<meta name="description"
content="Exemplo de uso de CSS Grid para criar um layout responsivo com uma grade de itens e áreas de conteúdo definidas." />
<meta name="keywords" content="CSS Grid, layout responsivo, design web, desenvolvimento web" />
<title>CSS Grid</title>
<style>
body {
margin: 0;
}
.gridContainer {
width: 100vw;
height: 100vh;
background: #ccc;
}
.gridItem {
background-color: orange;
padding: 15px;
font-family: Arial, Helvetica, sans-serif;
}
/* GRID */
.gridContainer {
display: grid;
/* grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end col3-start] 1fr [col3-end]; */
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
grid-template-rows: [header-start] 75px [header-end nav-start] 50px [nav-end main-start] 1fr [main-end footer-start] 50px [footer-end];
gap: 1em;
}
.header {
grid-column: col-start 1 / col-end 3;
grid-row: header;
}
.nav {
grid-column: col-start 1 / col-end 2;
grid-row: nav;
}
.aside {
grid-row: nav-start / footer-end;
grid-column: col-start 3;
z-index: 1;
}
.main {
grid-row: main;
grid-column: col-start 1 / col-end 2;
/* grid-column: 1 / 3; */
}
.footer {
/* grid-column: col-start 1 / col-end 3; */
grid-column: col-start 1 / span 3;
grid-row: footer;
background-color: rgb(0 0 0 / 0.5);
z-index: 2;
}
/* nav */
nav {
background-color: #ccc;
padding: 10px 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
li {
margin: 0 10px;
}
a {
text-decoration: none;
color: white;
font-weight: bold;
padding: 8px 12px;
border-radius: 5px;
transition: background-color 0.2s ease;
}
a:hover {
background-color: #818181;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Index</a></li>
<li><a href="grid.html">Grid0</a></li>
<li><a href="grid1.html">Grid1</a></li>
<li><a href="grid2.html">Grid2</a></li>
<li><a href="grid3.html">Grid3</a></li>
<li><a href="grid4.html">Grid4</a></li>
</ul>
</nav>
<div class="gridContainer">
<header class="header gridItem">header</header>
<nav class="nav gridItem">nav</nav>
<aside class="aside gridItem">aside</aside>
<main class="main gridItem">main</main>
<footer class="footer gridItem">footer</footer>
</div>
</body>
</html>