Skip to content

Commit f08ab1c

Browse files
duba74duba74
committed
css grid
1 parent 10de6bc commit f08ab1c

File tree

4 files changed

+474
-397
lines changed

4 files changed

+474
-397
lines changed

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

Lines changed: 102 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,111 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>CSS Grid</title>
8-
<style>
9-
.el--1 {
10-
background-color: blueviolet;
11-
}
12-
.el--2 {
13-
background-color: orangered;
14-
}
15-
.el--3 {
16-
background-color: green;
17-
height: 150px;
18-
}
19-
.el--4 {
20-
background-color: goldenrod;
21-
}
22-
.el--5 {
23-
background-color: palevioletred;
24-
}
25-
.el--6 {
26-
background-color: steelblue;
27-
}
28-
.el--7 {
29-
background-color: yellow;
30-
}
31-
.el--8 {
32-
background-color: crimson;
33-
}
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>CSS Grid</title>
8+
<style>
9+
.el--1 {
10+
background-color: blueviolet;
11+
}
12+
.el--2 {
13+
background-color: orangered;
14+
}
15+
.el--3 {
16+
background-color: green;
17+
height: 150px;
18+
}
19+
.el--4 {
20+
background-color: goldenrod;
21+
}
22+
.el--5 {
23+
background-color: palevioletred;
24+
}
25+
.el--6 {
26+
background-color: steelblue;
27+
}
28+
.el--7 {
29+
background-color: yellow;
30+
}
31+
.el--8 {
32+
background-color: crimson;
33+
}
3434

35-
.container--1 {
36-
/* STARTER */
37-
font-family: sans-serif;
38-
background-color: #ddd;
39-
font-size: 40px;
40-
margin: 40px;
35+
.container--1 {
36+
/* STARTER */
37+
font-family: sans-serif;
38+
background-color: #ddd;
39+
font-size: 40px;
40+
margin: 40px;
4141

42-
/* CSS GRID */
43-
}
42+
/* CSS GRID */
43+
display: grid;
44+
grid-template-columns: repeat(4, 1fr);
45+
grid-template-rows: 1fr 1fr;
46+
gap: 60px 30px;
47+
/* TEMP */
48+
display: none;
49+
}
4450

45-
.container--2 {
46-
/* STARTER */
47-
font-family: sans-serif;
48-
background-color: black;
49-
font-size: 40px;
50-
margin: 100px;
51+
.el--8 {
52+
grid-column: 2 / 3;
53+
grid-row: 1 / span 3;
54+
}
5155

52-
width: 1000px;
53-
height: 600px;
56+
.el--2 {
57+
grid-column: 1 / -1;
58+
grid-row: 2 / 3;
59+
}
5460

55-
/* CSS GRID */
56-
}
57-
</style>
58-
</head>
59-
<body>
60-
<div class="container--1">
61-
<div class="el el--1">(1) HTML</div>
62-
<div class="el el--2">(2) and</div>
63-
<div class="el el--3">(3) CSS</div>
64-
<div class="el el--4">(4) are</div>
65-
<div class="el el--5">(5) amazing</div>
66-
<div class="el el--6">(6) languages</div>
67-
<div class="el el--7">(7) to</div>
68-
<div class="el el--8">(8) learn</div>
69-
</div>
61+
.container--2 {
62+
/* STARTER */
63+
/* display: none; */
7064

71-
<div class="container--2">
72-
<div class="el el--1">(1)</div>
73-
<div class="el el--3">(3)</div>
74-
<div class="el el--4">(4)</div>
75-
<div class="el el--5">(5)</div>
76-
<div class="el el--6">(6)</div>
77-
<div class="el el--7">(7)</div>
78-
</div>
79-
</body>
65+
font-family: sans-serif;
66+
background-color: #999;
67+
font-size: 40px;
68+
margin: 100px;
69+
70+
width: 1000px;
71+
height: 600px;
72+
73+
/* CSS GRID */
74+
display: grid;
75+
76+
grid-template-columns: 125px 200px 125px;
77+
grid-template-rows: 250px 100px;
78+
79+
gap: 40px 50px;
80+
81+
justify-content: center;
82+
align-content: space-around;
83+
84+
justify-items: center;
85+
align-items: center;
86+
}
87+
</style>
88+
</head>
89+
<body>
90+
<div class="container--1">
91+
<div class="el el--1">(1) HTML</div>
92+
/* TEMP */ display: none;
93+
<div class="el el--2">(2) and</div>
94+
<div class="el el--3">(3) CSS</div>
95+
<div class="el el--4">(4) are</div>
96+
<div class="el el--5">(5) amazing</div>
97+
<div class="el el--6">(6) languages</div>
98+
<div class="el el--7">(7) to</div>
99+
<div class="el el--8">(8) learn</div>
100+
</div>
101+
102+
<div class="container--2">
103+
<div class="el el--1">(1)</div>
104+
<div class="el el--3">(3)</div>
105+
<div class="el el--4">(4)</div>
106+
<div class="el el--5">(5)</div>
107+
<div class="el el--6">(6)</div>
108+
<div class="el el--7">(7)</div>
109+
</div>
110+
</body>
80111
</html>

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

Lines changed: 84 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,89 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Flexbox</title>
8-
<style>
9-
.el--1 {
10-
background-color: blueviolet;
11-
}
12-
.el--2 {
13-
background-color: orangered;
14-
}
15-
.el--3 {
16-
background-color: green;
17-
height: 150px;
18-
}
19-
.el--4 {
20-
background-color: goldenrod;
21-
}
22-
.el--5 {
23-
background-color: palevioletred;
24-
}
25-
.el--6 {
26-
background-color: steelblue;
27-
}
28-
.el--7 {
29-
background-color: yellow;
30-
}
31-
.el--8 {
32-
background-color: crimson;
33-
}
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Flexbox</title>
8+
<style>
9+
.el--1 {
10+
background-color: blueviolet;
11+
}
12+
.el--2 {
13+
background-color: orangered;
14+
}
15+
.el--3 {
16+
background-color: green;
17+
height: 150px;
18+
}
19+
.el--4 {
20+
background-color: goldenrod;
21+
}
22+
.el--5 {
23+
background-color: palevioletred;
24+
}
25+
.el--6 {
26+
background-color: steelblue;
27+
}
28+
.el--7 {
29+
background-color: yellow;
30+
}
31+
.el--8 {
32+
background-color: crimson;
33+
}
3434

35-
.container {
36-
/* STARTER */
37-
font-family: sans-serif;
38-
background-color: #ddd;
39-
font-size: 40px;
40-
margin: 40px;
35+
.container {
36+
/* STARTER */
37+
font-family: sans-serif;
38+
background-color: #ddd;
39+
font-size: 40px;
40+
margin: 40px;
4141

42-
/* FLEXBOX */
43-
}
44-
</style>
45-
</head>
46-
<body>
47-
<div class="container">
48-
<div class="el el--1">HTML</div>
49-
<div class="el el--2">and</div>
50-
<div class="el el--3">CSS</div>
51-
<div class="el el--4">are</div>
52-
<div class="el el--5">amazing</div>
53-
<div class="el el--6">languages</div>
54-
<div class="el el--7">to</div>
55-
<div class="el el--8">learn</div>
56-
</div>
57-
</body>
42+
/* FLEXBOX */
43+
display: flex;
44+
align-items: center;
45+
justify-content: flex-start;
46+
/* gap: 30px; */
47+
}
48+
49+
.el {
50+
/* DEFAULTS
51+
flex-grow: 0;
52+
flex-shrink: 1;
53+
flex-basis: auto; */
54+
/* flex-basis: 200px; */
55+
flex-shrink: 0;
56+
/* flex-grow: 1; */
57+
}
58+
59+
.el--1 {
60+
align-self: flex-start;
61+
/* order: 1; */
62+
}
63+
64+
.el--4 {
65+
align-self: stretch;
66+
}
67+
68+
.el--5 {
69+
flex-grow: 1;
70+
}
71+
72+
.el--6 {
73+
/* order: -1; */
74+
}
75+
</style>
76+
</head>
77+
<body>
78+
<div class="container">
79+
<div class="el el--1">HTML</div>
80+
<div class="el el--2">and</div>
81+
<div class="el el--3">CSS</div>
82+
<div class="el el--4">are</div>
83+
<div class="el el--5">amazing</div>
84+
<div class="el el--6">languages</div>
85+
<!-- <div class="el el--7">to</div>
86+
<div class="el el--8">learn</div> -->
87+
</div>
88+
</body>
5889
</html>

0 commit comments

Comments
 (0)