Skip to content

Commit dbaf0be

Browse files
dinanathsj29dinanathsj29
authored
Chapter 2 - 2.11 - examples uploaded
Chapter 2 - 2.11 - examples uploaded
1 parent c6f7968 commit dbaf0be

File tree

1 file changed

+122
-0
lines changed

1 file changed

+122
-0
lines changed

‎_examples-css-grid/2.11-nested-grid-template.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9+
<title>2.11-nested-grid-template.html</title>
10+
11+
<style type="text/css">
12+
13+
body {
14+
margin: 0;
15+
padding: 0;
16+
font-family: verdana;
17+
18+
color: #000000;
19+
font-size: 1rem;
20+
text-align: center;
21+
}
22+
23+
.main-container {
24+
width: 980px;
25+
margin: 0 auto;
26+
27+
display: grid; /* block level grid container */
28+
grid-template-columns: repeat(4, 1fr);
29+
grid-template-rows: auto;
30+
grid-gap: 20px;
31+
32+
grid-template-areas:
33+
"headerArea headerArea headerArea headerArea"
34+
"mainArea mainArea asideArea asideArea"
35+
"mainArea mainArea navArea navArea"
36+
"sectionArea sectionArea sectionArea sectionArea"
37+
"footerArea footerArea footerArea footerArea";
38+
}
39+
40+
.main-container > * {
41+
background-color: #e6ba6c;
42+
padding: 20px;
43+
}
44+
45+
.header-section {
46+
grid-area: headerArea;
47+
background-color: #bd7b04;
48+
}
49+
50+
.main-section {
51+
grid-area: mainArea;
52+
}
53+
54+
.section {
55+
grid-area: sectionArea;
56+
}
57+
58+
.aside-section {
59+
grid-area: asideArea;
60+
}
61+
62+
.nav-section {
63+
grid-area: navArea;
64+
}
65+
66+
.footer-section {
67+
grid-area: footerArea;
68+
background-color: #bd7b04;
69+
}
70+
71+
.nested-grid-container {
72+
margin-top: 20px;
73+
display: grid;
74+
grid-gap:10px;
75+
76+
/* 2.11.1 */
77+
grid-template-columns: 1fr 1fr 1fr 1fr;
78+
grid-template-rows: 150px;
79+
80+
/* 2.11.2 */
81+
/* grid-template-columns: 1fr 1fr;
82+
grid-template-rows: auto 150px; */
83+
84+
/* 2.11.3 */
85+
/* grid-template-columns: 1fr 1fr; */
86+
}
87+
88+
.nested-grid-container article{
89+
background-color: #bb8b34;
90+
padding:10px;
91+
}
92+
93+
</style>
94+
95+
</head>
96+
97+
<body>
98+
99+
<div class="main-container">
100+
<header class="header-section"><h1>Header Section</h1></header>
101+
102+
<main class="main-section">
103+
<strong>Main Section with Nested Sub Section</strong>
104+
105+
<section class="nested-grid-container">
106+
<article class="article1">Article 1</article>
107+
<article class="article2">Article 2</article>
108+
<article class="article3">Article 3</article>
109+
<article class="article4">Article 4</article>
110+
</section>
111+
112+
</main>
113+
114+
<section class="section">Section Section</section>
115+
<aside class="aside-section">Aside Section</aside>
116+
<nav class="nav-section">Nav Section</nav>
117+
<footer class="footer-section"><small>Footer Section</small></footer>
118+
</div>
119+
120+
</body>
121+
122+
</html>

0 commit comments

Comments
 (0)