-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCSS-grid-template-area-V3.html
136 lines (133 loc) · 3.87 KB
/
CSS-grid-template-area-V3.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Template Area</title>
<link rel="stylesheet" href="basic-style.css">
<style>
body{
background: black;
}
.container{
display: grid;
grid-template-columns: 1fr 500px 1fr;
grid-template-rows: 150px 150px 100px;
grid-template-areas:
"sidebar1 content sidebar2"
"sidebar1 content sidebar2"
"footer footer footer"
;
grid-gap: 20px;
}
.item1{
grid-area: sidebar1;
}
.item2{
grid-area: content;
}
.item3{
grid-area: sidebar2;
}
.footer{
grid-area: footer;
}
/* =======
wrapper
=========== */
.wrapper p,.wrapper h3, .wrapper ul{
color: slateblue;
font-size: 18px;
}
.wrapper .item{
background: whitesmoke;
}
.head ul{
list-style: none;
padding: 0;
margin: 0;
}
.head ul li{
display: inline-block;
margin-right: 20px;
}
.wrapper{
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4,250px);
grid-template-areas:
"head head head head"
"side side main main"
"ads ads main main"
"footer footer footer footer";
}
.head{
grid-area: head;
}
.side{
grid-area: side;
}
.main{
grid-area: main;
}
.ads{
grid-area: ads;
justify-content: start;
}
.footer2{
grid-area: footer;
}
.wrapper > div>*{
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">
<p>I'm Sidebar #1</p>
</div>
<div class="item item2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, sed.</p>
<p>Lorem ipsum d</p>
</div>
<div class="item item3">
<p>I'm Sidebar #2</p>
</div>
<div class="item footer">
<p>I'm the footer</p>
</div>
</div>
<hr>
<div class="wrapper">
<header class="head item">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Faq</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="side item">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit corrupti nisi doloribus officia reprehenderit, temporibus quos sed iure. Assumenda odio expedita necessitatibus facilis in eius ea harum ipsum quam pain side?</p>
</div>
<div class="main item">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea ad, ab libero, dolor placeat omnis accusantium sunt qui sint rem minus dicta, magnam voluptatum modi quod quasi tenetur sequi quia!
Quos maxime beatae quam sapiente magni sint enim dolore excepturi quo ad voluptatibus tenetur dignissimos quas at repellat minus, voluptatem omnis cum modi natus delectus! Voluptatum neque minima quam voluptate.
Commodi neque velit dolore tempora, quaerat quo eaque delectus eum, recusandae officiis dolorem id sunt molestiae possimus ex harum repellendus! Sint enim, odit aperiam quam velit vel porro ullam? main.
</p>
</div>
<div class="ads item">
<h3>CSS Grid Rocks</h3>
</div>
<div class="footer2 item">
<footer>
<h3> ©Rakib Talukder 2020</h3>
</footer>
</div>
</div>
</body>
</html>