Skip to content

Commit 1d2c0c0

Browse files
rahilsamarahilsama
committed
Aligning grid items and tracks
1 parent f7a4022 commit 1d2c0c0

File tree

3 files changed

+168
-129
lines changed

3 files changed

+168
-129
lines changed

‎starter/04-CSS-Layouts/css-grid.html

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,16 +52,27 @@
5252

5353
.container--2 {
5454
/* STARTER */
55-
display: none;
5655
font-family: sans-serif;
5756
background-color: black;
5857
font-size: 40px;
59-
margin: 100px;
58+
margin: 40px;
6059

61-
width: 1000px;
60+
width: 700px;
6261
height: 600px;
6362

6463
/* CSS GRID */
64+
display: grid;
65+
grid-template-columns: 125px 200px 125px;
66+
grid-template-rows: 250px, 100px;
67+
gap: 50px;
68+
/*Aligning tracks inside container:
69+
distribute empty space; */
70+
justify-content: center;
71+
72+
align-content: center;
73+
74+
align-items: center;
75+
justify-items: center;
6576
}
6677

6778
.el--8 {

‎starter/04-CSS-Layouts/index.html

Lines changed: 123 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -32,134 +32,135 @@ <h1>📘 The Code Magazine</h1>
3232
<!-- <div class="clear"></div> -->
3333
</header>
3434

35-
<div class="row">
36-
<article>
37-
<header class="post-header">
38-
<h2>The Basic Language of the Web: HTML</h2>
39-
40-
<img
41-
src="img/laura-jones.jpg"
42-
alt="Headshot of Laura Jones"
43-
height="50"
44-
width="50"
45-
class="author-img"
46-
/>
47-
48-
<p id="author" class="author">
49-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
50-
</p>
51-
52-
<img
53-
src="img/post-img.jpg"
54-
alt="HTML code on a screen"
55-
width="500"
56-
height="200"
57-
class="post-img"
58-
/>
59-
<button>❤️ Like</button>
60-
</header>
61-
62-
<p>
63-
All modern websites and web applications are built using three
64-
<em>fundamental</em>
65-
technologies: HTML, CSS and JavaScript. These are the languages of
66-
the web.
35+
<!-- only needed for the flexbox -->
36+
<!-- <div class="row"> -->
37+
<article>
38+
<header class="post-header">
39+
<h2>The Basic Language of the Web: HTML</h2>
40+
41+
<img
42+
src="img/laura-jones.jpg"
43+
alt="Headshot of Laura Jones"
44+
height="50"
45+
width="50"
46+
class="author-img"
47+
/>
48+
49+
<p id="author" class="author">
50+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
6751
</p>
6852

69-
<p>
70-
In this post, let's focus on HTML. We will learn what HTML is all
71-
about, and why you too should learn it.
72-
</p>
53+
<img
54+
src="img/post-img.jpg"
55+
alt="HTML code on a screen"
56+
width="500"
57+
height="200"
58+
class="post-img"
59+
/>
60+
<button>❤️ Like</button>
61+
</header>
62+
63+
<p>
64+
All modern websites and web applications are built using three
65+
<em>fundamental</em>
66+
technologies: HTML, CSS and JavaScript. These are the languages of the
67+
web.
68+
</p>
7369

74-
<h3>What is HTML?</h3>
75-
<p>
76-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
77-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
78-
language that web developers use to structure and describe the
79-
content of a webpage (not a programming language).
80-
</p>
81-
<p>
82-
HTML consists of elements that describe different types of content:
83-
paragraphs, links, headings, images, video, etc. Web browsers
84-
understand HTML and render HTML code as websites.
85-
</p>
86-
<p>In HTML, each element is made up of 3 parts:</p>
87-
88-
<ol>
89-
<li class="first-li">The opening tag</li>
90-
<li>The closing tag</li>
91-
<li>The actual element</li>
92-
</ol>
93-
94-
<p>
95-
You can learn more at
96-
<a
97-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
98-
target="_blank"
99-
>MDN Web Docs</a
100-
>.
101-
</p>
70+
<p>
71+
In this post, let's focus on HTML. We will learn what HTML is all
72+
about, and why you too should learn it.
73+
</p>
10274

103-
<h3>Why should you learn HTML?</h3>
75+
<h3>What is HTML?</h3>
76+
<p>
77+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
78+
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
79+
language that web developers use to structure and describe the content
80+
of a webpage (not a programming language).
81+
</p>
82+
<p>
83+
HTML consists of elements that describe different types of content:
84+
paragraphs, links, headings, images, video, etc. Web browsers
85+
understand HTML and render HTML code as websites.
86+
</p>
87+
<p>In HTML, each element is made up of 3 parts:</p>
88+
89+
<ol>
90+
<li class="first-li">The opening tag</li>
91+
<li>The closing tag</li>
92+
<li>The actual element</li>
93+
</ol>
94+
95+
<p>
96+
You can learn more at
97+
<a
98+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
99+
target="_blank"
100+
>MDN Web Docs</a
101+
>.
102+
</p>
104103

105-
<p>
106-
There are countless reasons for learning the fundamental language of
107-
the web. Here are 5 of them:
108-
</p>
104+
<h3>Why should you learn HTML?</h3>
105+
106+
<p>
107+
There are countless reasons for learning the fundamental language of
108+
the web. Here are 5 of them:
109+
</p>
109110

110-
<ul>
111-
<li class="first-li">
112-
To be able to use the fundamental web dev language
113-
</li>
114-
<li>
115-
To hand-craft beautiful websites instead of relying on tools like
116-
Worpress or Wix
117-
</li>
118-
<li>To build web applications</li>
119-
<li>To impress friends</li>
120-
<li>To have fun 😃</li>
121-
</ul>
122-
123-
<p>Hopefully you learned something new here. See you next time!</p>
124-
</article>
125-
126-
<aside>
127-
<h4>Related posts</h4>
128-
129-
<ul class="related">
130-
<li>
131-
<img
132-
src="img/related-1.jpg"
133-
alt="Person programming"
134-
width="75"
135-
height="75"
136-
/>
137-
<a href="#">How to Learn Web Development</a>
138-
<p class="related-author">By Jonas Schmedtmann</p>
139-
</li>
140-
<li>
141-
<img
142-
src="img/related-2.jpg"
143-
alt="Lightning"
144-
width="75"
145-
height="75"
146-
/>
147-
<a href="#">The Unknown Powers of CSS</a>
148-
<p class="related-author">By Jim Dillon</p>
149-
</li>
150-
<li>
151-
<img
152-
src="img/related-3.jpg"
153-
alt="JavaScript code on a screen"
154-
width="75"
155-
height="75"
156-
/>
157-
<a href="#">Why JavaScript is Awesome</a>
158-
<p class="related-author">By Matilda</p>
159-
</li>
160-
</ul>
161-
</aside>
162-
</div>
111+
<ul>
112+
<li class="first-li">
113+
To be able to use the fundamental web dev language
114+
</li>
115+
<li>
116+
To hand-craft beautiful websites instead of relying on tools like
117+
Worpress or Wix
118+
</li>
119+
<li>To build web applications</li>
120+
<li>To impress friends</li>
121+
<li>To have fun 😃</li>
122+
</ul>
123+
124+
<p>Hopefully you learned something new here. See you next time!</p>
125+
</article>
126+
127+
<aside>
128+
<h4>Related posts</h4>
129+
130+
<ul class="related">
131+
<li>
132+
<img
133+
src="img/related-1.jpg"
134+
alt="Person programming"
135+
width="75"
136+
height="75"
137+
/>
138+
<a href="#">How to Learn Web Development</a>
139+
<p class="related-author">By Jonas Schmedtmann</p>
140+
</li>
141+
<li>
142+
<img
143+
src="img/related-2.jpg"
144+
alt="Lightning"
145+
width="75"
146+
height="75"
147+
/>
148+
<a href="#">The Unknown Powers of CSS</a>
149+
<p class="related-author">By Jim Dillon</p>
150+
</li>
151+
<li>
152+
<img
153+
src="img/related-3.jpg"
154+
alt="JavaScript code on a screen"
155+
width="75"
156+
height="75"
157+
/>
158+
<a href="#">Why JavaScript is Awesome</a>
159+
<p class="related-author">By Matilda</p>
160+
</li>
161+
</ul>
162+
</aside>
163+
<!-- </div> -->
163164
<footer>
164165
<p id="copyright" class="copyright text">
165166
Copyright &copy; 2027 by The Code Magazine.

‎starter/04-CSS-Layouts/style.css

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ body {
2727
padding-left: 40px;
2828
padding-right: 40px; */
2929
padding: 20px 40px;
30-
margin-bottom: 60px;
30+
/* margin-bottom: 60px; */
3131
/* height: 80px; */
3232
}
3333

@@ -37,7 +37,7 @@ nav {
3737
}
3838

3939
article {
40-
margin-bottom: 60px;
40+
/* margin-bottom: 60px; */
4141
}
4242

4343
.post-header {
@@ -309,17 +309,44 @@ footer {
309309
clear: both;
310310
} */
311311

312-
.row {
312+
/* FLEXBOX LAYOUT */
313+
/* .row {
313314
display: flex;
314315
gap: 75px;
315316
align-items: flex-start;
316317
}
317318
318319
article {
319-
/* flex: 0 0 825px; */
320320
flex: 1;
321321
margin-bottom: 0;
322322
}
323323
aside {
324324
flex: 0 0 300px;
325+
} */
326+
327+
/* CSS GRID LAYOUT */
328+
329+
.container {
330+
display: grid;
331+
332+
grid-template-columns: 1fr 300px;
333+
column-gap: 50px;
334+
row-gap: 60px;
335+
336+
align-items: start;
337+
}
338+
339+
.main-header {
340+
grid-column: 1/-1;
341+
}
342+
343+
article {
344+
grid-column: 1/2;
345+
}
346+
347+
aside {
348+
}
349+
350+
footer {
351+
grid-column: 1/-1;
325352
}

0 commit comments

Comments
 (0)