Skip to content

Commit 00e1246

Browse files
wesboswesbos
committed
Merge branch 'master' of https://github.com/wesbos/css-grid 
2 parents 00ecd8e + 2760c1b commit 00e1246

File tree

30 files changed

+105
-158
lines changed

30 files changed

+105
-158
lines changed

‎02 - Starter Files Setup/test-START.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
<link rel="stylesheet" href="../assets/style.css">
88
<title>Starter Files!</title>
99
</head>
10-
<p>Hello!</p>
11-
1210

1311
<style>
1412
p {
@@ -19,6 +17,7 @@
1917
</style>
2018

2119
<body>
20+
<p>Hello!</p>
2221
</body>
2322

2423
</html>

‎04 - CSS Grid Dev Tools/dev-tools-START.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@
2323
</div>
2424

2525
<style>
26+
.container {
27+
display: grid;
28+
}
2629
</style>
2730
</body>
2831

29-
</html>
32+
</html>

‎05 - CSS Grid Implicit vs Explicit Tracks/implicit-vs-explicit-START.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,8 @@
1919
<style>
2020
.container {
2121
display: grid;
22-
grid-gap: 20px;
2322
}
2423
</style>
2524
</body>
2625

27-
</html>
26+
</html>

‎06 - CSS grid-auto-flow Explained/autoflow-FINISHED.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>Implicit vs Explicit Grid</title>
8+
<title>grid-auto-flow</title>
99
</head>
1010

1111
<body>

‎06 - CSS grid-auto-flow Explained/autoflow-START.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>Implicit vs Explicit Grid</title>
8+
<title>grid-auto-flow</title>
99
</head>
1010

1111
<body>

‎07 - Sizing tracks in CSS Grid/sizing-tracks-FINISHED.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>Implicit vs Explicit Grid</title>
8+
<title>Sizing tracks in CSS Grid</title>
99
</head>
1010

1111
<body>

‎07 - Sizing tracks in CSS Grid/sizing-tracks-START.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>Implicit vs Explicit Grid</title>
8+
<title>Sizing tracks in CSS Grid</title>
99
</head>
1010

1111
<body>

‎10 - Placing Grid Items/placing-START.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<div class="item item6">6</div>
1919
<div class="item item7">7</div>
2020
<div class="item item8">8</div>
21-
<div class="item poop">💩</div>
21+
<div class="item item8">💩</div>
2222
<div class="item item9">9</div>
2323
<div class="item item10">10</div>
2424
<div class="item item11">11</div>
@@ -47,8 +47,9 @@
4747
.container {
4848
display: grid;
4949
grid-gap: 20px;
50+
grid-template-columns: repeat(5, 1fr);
5051
}
5152
</style>
5253
</body>
5354

54-
</html>
55+
</html>

‎12 - auto-fit and auto-fill Explained/auto-fit-and-auto-fill-FINISHED.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>Spanning & Placing Cardio</title>
8+
<title>auto-fit and auto-fill</title>
99
</head>
1010

1111
<body>

‎12 - auto-fit and auto-fill Explained/auto-fit-and-auto-fill-START.html

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>Spanning & Placing Cardio</title>
8+
<title>auto-fit and auto-fill</title>
99
</head>
1010

1111
<body>
@@ -14,6 +14,22 @@
1414
<div class="item item2">Item 02</div>
1515
<div class="item item3">Item 03</div>
1616
<div class="item item4">Item 04</div>
17+
<div class="item item5">Item 05</div>
18+
<div class="item item6">Item 06</div>
19+
<div class="item item7">Item 07</div>
20+
<div class="item item8">Item 08</div>
21+
<div class="item item9">Item 09</div>
22+
<div class="item item10">Item 10</div>
23+
<div class="item item11">Item 11</div>
24+
<div class="item item12">Item 12</div>
25+
<div class="item item13">Item 13</div>
26+
<div class="item item14">Item 14</div>
27+
<div class="item item15">Item 15</div>
28+
<div class="item item16">Item 16</div>
29+
<div class="item item17">Item 17</div>
30+
<div class="item item18">Item 18</div>
31+
<div class="item item19">Item 19</div>
32+
<div class="item item20">Item 20</div>
1733
</div>
1834

1935
<style>
@@ -25,4 +41,4 @@
2541
</style>
2642
</body>
2743

28-
</html>
44+
</html>

‎14 - Grid Template Areas/areas-FINISHED.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>CSS Grid minmax()</title>
8+
<title>CSS Grid Template Areas</title>
99
</head>
1010

1111
<body>
@@ -62,4 +62,4 @@
6262
</style>
6363
</body>
6464

65-
</html>
65+
</html>

‎14 - Grid Template Areas/areas-START.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>CSS Grid minmax()</title>
8+
<title>CSS Grid Template Areas</title>
99
</head>
1010

1111
<body>
@@ -34,4 +34,4 @@
3434
</style>
3535
</body>
3636

37-
</html>
37+
</html>

‎14 - Grid Template Areas/areas.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>CSS Grid minmax()</title>
8+
<title>CSS Grid Template Areas</title>
99
</head>
1010

1111
<body>

‎15 - Naming Lines in CSS Grid/naming-lines-START.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,12 @@
4646
.container {
4747
display: grid;
4848
grid-gap: 20px;
49+
grid-template-columns: 1fr 500px 1fr;
50+
grid-template-rows: repeat(10, auto);
4951
}
5052

5153

5254
</style>
5355
</body>
5456

55-
</html>
57+
</html>

‎16 - grid-auto-flow dense Block Fitting/dense-FINISHED.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>Line Names from Grid Areas</title>
8+
<title>Grid Auto Flow Dense</title>
99
</head>
1010

1111
<body>

‎17 - CSS Grid Alignment + Centering/alignment-and-centering-START.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,13 +69,11 @@
6969
.container {
7070
display: grid;
7171
grid-gap: 20px;
72-
height: 500px;
73-
border: 10px solid var(--yellow);
74-
grid-template-columns: repeat(10, 130px);
72+
grid-template-columns: repeat(10, 1fr);
7573
}
7674

7775

7876
</style>
7977
</body>
8078

81-
</html>
79+
</html>

‎18 - Re-ordering Grid Items/order-START.html

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,9 @@
2121
.container {
2222
display: grid;
2323
grid-gap: 20px;
24-
grid-template-columns: repeat(10, 1fr);
25-
}
26-
27-
.logo {
28-
grid-column: span 2;
29-
order: 2;
30-
}
31-
.nav {
32-
grid-column: span 8;
33-
order:1;
34-
35-
}
36-
.content {
37-
grid-column: 1 / -1;
38-
order: 3;
3924
}
4025

4126
</style>
4227
</body>
4328

44-
</html>
29+
</html>

‎20 - Grid Image Gallery/image-gallery-START.html

Lines changed: 3 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747

4848
.close {
4949
background: none;
50-
color: black;
50+
color: white;
5151
border: 0;
5252
}
5353

@@ -68,11 +68,9 @@
6868

6969
.overlay.open {
7070
display: grid;
71-
align-items: center;
72-
justify-items: center;
7371
}
7472

75-
.overlay-inner {
73+
.overlay figure {
7674
background: white;
7775
width: 700px;
7876
padding: 20px;
@@ -84,49 +82,7 @@
8482
</style>
8583

8684
<script>
87-
const gallery = document.querySelector('.gallery');
88-
const overlay = document.querySelector('.overlay');
89-
const overlayImage = overlay.querySelector('img');
90-
const overlayClose = overlay.querySelector('.close');
91-
92-
function generateHTML([h, v]) {
93-
return `
94-
<div class="item h${h} v${v}">
95-
<img src="images/${randomNumber(12)}.jpg">
96-
<div class="item__overlay">
97-
<button>View →</button>
98-
</div>
99-
</div>
100-
`;
101-
}
102-
103-
function randomNumber(limit) {
104-
return Math.floor(Math.random() * limit) + 1;
105-
}
106-
107-
function handleClick(e) {
108-
const src = e.currentTarget.querySelector('img').src;
109-
overlayImage.src = src;
110-
overlay.classList.add('open');
111-
}
112-
113-
114-
function close() {
115-
overlay.classList.remove('open');
116-
}
117-
118-
const digits = Array.from({ length: 50 }, () => [randomNumber(4), randomNumber(4)]).concat([[1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1]])
119-
120-
const html = digits.map(generateHTML).join('');
121-
gallery.innerHTML = html;
122-
123-
const items = document.querySelectorAll('.item');
124-
125-
items.forEach(item => item.addEventListener('click', handleClick));
126-
127-
overlayClose.addEventListener('click', close);
128-
12985
</script>
13086
</body>
13187

132-
</html>
88+
</html>

‎21 - Flexbox vs CSS Grid/controls-on-right-START.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>Flex on Item</title>
8+
<title>Controls on Right</title>
99
</head>
1010

1111
<body>

‎21 - Flexbox vs CSS Grid/flex-on-item-FINISHED.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>Perfectly Centered</title>
8+
<title>Flex on Item</title>
99
</head>
1010

1111
<body>

‎21 - Flexbox vs CSS Grid/flex-on-item-START.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>Perfectly Centered</title>
8+
<title>Flex on Item</title>
99
</head>
1010

1111
<body>

‎21 - Flexbox vs CSS Grid/flexbox-vs-grid.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>CSS Grid with CSS Variables</title>
8+
<title>Flexbox vs CSS Grid</title>
99
</head>
1010

1111

‎21 - Flexbox vs CSS Grid/unknown-content-size-FINISHED.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>Perfectly Centered</title>
8+
<title>Unknown Content Size</title>
99
</head>
1010

1111
<body>

‎21 - Flexbox vs CSS Grid/unknown-content-size-START.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>Perfectly Centered</title>
8+
<title>Unknown Content Size</title>
99
</head>
1010

1111
<body>

‎21 - Flexbox vs CSS Grid/unknown-number-of-items-FINISHED.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../assets/style.css">
8-
<title>Perfectly Centered</title>
8+
<title>Unknown Number of Items</title>
99
</head>
1010

1111
<body>

0 commit comments

Comments
 (0)