davidvandenbor · January 30, 2022 22:59 · Jan 30, 2022 · Jan 30, 2022 · Apr 30, 2020 · Apr 27, 2020
diff --git a/basic-css-grid-example-study-of-grid-lines.markdown b/basic-css-grid-example-study-of-grid-lines.markdown
@@ -1,8 +1,8 @@
 Basic CSS Grid example, study of grid lines
 -------------------------------------------
 
-[here](https://bl.ocks.org/davidvandenbor/94973470a99d843d008631af6cf6014e)
-
+See the code preview [here](https://bl.ocks.org/davidvandenbor/94973470a99d843d008631af6cf6014e)
+The full page preview here: https://bl.ocks.org/davidvandenbor/raw/94973470a99d843d008631af6cf6014e/?raw=true
 
 This is the layout that we're trying to build: 
 

diff --git a/basic-css-grid-example-study-of-grid-lines.markdown b/basic-css-grid-example-study-of-grid-lines.markdown
@@ -1,7 +1,8 @@
 Basic CSS Grid example, study of grid lines
 -------------------------------------------
 
-Edit in Plunker: https://plnkr.co/edit/gist:94973470a99d843d008631af6cf6014e
+[here](https://bl.ocks.org/davidvandenbor/94973470a99d843d008631af6cf6014e)
+
 
 This is the layout that we're trying to build: 
 

diff --git a/basic-css-grid-example-study-of-grid-lines.markdown b/basic-css-grid-example-study-of-grid-lines.markdown
@@ -5,4 +5,4 @@ Edit in Plunker: https://plnkr.co/edit/gist:94973470a99d843d008631af6cf6014e
 
 This is the layout that we're trying to build: 
 
-![css-grid-layout-example](https://gist.github.com/David-van-den-Bor/94973470a99d843d008631af6cf6014e/raw/6afaa767725eb6bbf858cb4401633eb1dce76122/css-grid-layout-example.gif)
+![css-grid-layout-example](https://gist.github.com/davidvandenbor/94973470a99d843d008631af6cf6014e/raw/6afaa767725eb6bbf858cb4401633eb1dce76122/css-grid-layout-example.gif)
diff --git a/basic-css-grid-example-study-of-grid-lines.markdown b/basic-css-grid-example-study-of-grid-lines.markdown
@@ -5,4 +5,4 @@ Edit in Plunker: https://plnkr.co/edit/gist:94973470a99d843d008631af6cf6014e
 
 This is the layout that we're trying to build: 
 
-![css-grid-layout-example](css-grid-layout-example.gif)
+![css-grid-layout-example](https://gist.github.com/David-van-den-Bor/94973470a99d843d008631af6cf6014e/raw/6afaa767725eb6bbf858cb4401633eb1dce76122/css-grid-layout-example.gif)
diff --git a/basic-css-grid-example-study-of-grid-lines.markdown b/basic-css-grid-example-study-of-grid-lines.markdown
@@ -5,4 +5,4 @@ Edit in Plunker: https://plnkr.co/edit/gist:94973470a99d843d008631af6cf6014e
 
 This is the layout that we're trying to build: 
 
-![css-grid-layout-example](https://user-images.githubusercontent.com/5694412/80422158-f5ba5200-88dd-11ea-87ed-aa9edf9f50cc.gif)
+![css-grid-layout-example](css-grid-layout-example.gif)
diff --git a/index.html b/index.html
@@ -28,7 +28,7 @@ <h2>footer</h2>
     <p>
         Below is the sketch on which the grid above was based. <br> Notice the grid-lines!! 1 till 5 horizontally, 1 till 4 vertically! <br> See CSS code for column and row spanning along grid lines! Experiment yourself. <br> You can also export, share or download this codepen, see buttons below in the bottom-right corner.
     </p>
-    <img src="https://user-images.githubusercontent.com/5694412/80422158-f5ba5200-88dd-11ea-87ed-aa9edf9f50cc.gif" class="example-image" alt="">
+    <img src="css-grid-layout-example.gif" class="example-image" alt="">
 </body>
 
 </html>
diff --git a/css-grid-layout-example.gif b/css-grid-layout-example.gif
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-    <img src="vs-icon.png" style="width: 100px;">
+
     <main>
         <header>
             <h2>header</h2>

diff --git a/vs-icon.png b/vs-icon.png
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-    <img src="vs-icon.png" width="100px">
+    <img src="vs-icon.png" style="width: 100px;">
     <main>
         <header>
             <h2>header</h2>

diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-    <img src="vs-icon.png" alt="">
+    <img src="vs-icon.png" width="100px">
     <main>
         <header>
             <h2>header</h2>

diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-    <img src="" alt="">
+    <img src="vs-icon.png" alt="">
     <main>
         <header>
             <h2>header</h2>

diff --git a/vs-icon.png b/vs-icon.png
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-
+    <img src="" alt="">
     <main>
         <header>
             <h2>header</h2>

diff --git a/basic-css-grid-example-study-of-grid-lines.markdown b/basic-css-grid-example-study-of-grid-lines.markdown
@@ -1,7 +1,6 @@
 Basic CSS Grid example, study of grid lines
 -------------------------------------------
 
-
 Edit in Plunker: https://plnkr.co/edit/gist:94973470a99d843d008631af6cf6014e
 
 This is the layout that we're trying to build: 

diff --git a/basic-css-grid-example-study-of-grid-lines.markdown b/basic-css-grid-example-study-of-grid-lines.markdown
@@ -2,11 +2,8 @@ Basic CSS Grid example, study of grid lines
 -------------------------------------------
 
 
-A [Pen](https://codepen.io/davidvdbor/pen/ZEEKzYL) by [David van den Bor](https://codepen.io/davidvdbor) on [CodePen](https://codepen.io).
-[License](https://codepen.io/davidvdbor/pen/ZEEKzYL/license).
-
 Edit in Plunker: https://plnkr.co/edit/gist:94973470a99d843d008631af6cf6014e
 
-Here's the image as a reference to the layout that needs to be emulated: 
+This is the layout that we're trying to build: 
 
 ![css-grid-layout-example](https://user-images.githubusercontent.com/5694412/80422158-f5ba5200-88dd-11ea-87ed-aa9edf9f50cc.gif)
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
-    <title>CSS Grid example, exercise using grid lines</title>
+    <title>CSS Grid example, exercise using grid lines!</title>
 </head>
 
 <body>

diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
-    <title>Grid example, exercise using grid lines</title>
+    <title>CSS Grid example, exercise using grid lines</title>
 </head>
 
 <body>

diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
-
+    <title>Grid example, exercise using grid lines</title>
 </head>
 
 <body>

diff --git a/index.html b/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-   <meta charset="UTF-8">
-   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
+
 </head>
+
 <body>
-    
-     <main>
+
+    <main>
         <header>
             <h2>header</h2>
         </header>
@@ -22,9 +25,10 @@ <h2>footer</h2>
         </footer>
     </main>
 
-   <p>
-Below is the sketch on which the grid above was based. <br> Notice the grid-lines!! 1 till 5 horizontally, 1 till 4 vertically! <br> See CSS code for column and row spanning along grid lines! Experiment yourself. <br> You can also export, share or download this codepen, see buttons below in the bottom-right corner.
-</p>
-<img src="https://user-images.githubusercontent.com/5694412/80422158-f5ba5200-88dd-11ea-87ed-aa9edf9f50cc.gif" class="example-image" alt="">
+    <p>
+        Below is the sketch on which the grid above was based. <br> Notice the grid-lines!! 1 till 5 horizontally, 1 till 4 vertically! <br> See CSS code for column and row spanning along grid lines! Experiment yourself. <br> You can also export, share or download this codepen, see buttons below in the bottom-right corner.
+    </p>
+    <img src="https://user-images.githubusercontent.com/5694412/80422158-f5ba5200-88dd-11ea-87ed-aa9edf9f50cc.gif" class="example-image" alt="">
 </body>
-</html>   
+
+</html>
diff --git a/basic-css-grid-example-study-of-grid-lines.markdown b/basic-css-grid-example-study-of-grid-lines.markdown
@@ -3,10 +3,10 @@ Basic CSS Grid example, study of grid lines
 
 
 A [Pen](https://codepen.io/davidvdbor/pen/ZEEKzYL) by [David van den Bor](https://codepen.io/davidvdbor) on [CodePen](https://codepen.io).
-
 [License](https://codepen.io/davidvdbor/pen/ZEEKzYL/license).
 
-Here's the image as a reference to the layout that needs to be emulated: 
+Edit in Plunker: https://plnkr.co/edit/gist:94973470a99d843d008631af6cf6014e
 
+Here's the image as a reference to the layout that needs to be emulated: 
 
 ![css-grid-layout-example](https://user-images.githubusercontent.com/5694412/80422158-f5ba5200-88dd-11ea-87ed-aa9edf9f50cc.gif)
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-   <title>Document</title>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
 

diff --git a/index.html b/index.html
@@ -1,4 +1,13 @@
-    <main>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <title>Document</title>
+</head>
+<body>
+
+     <main>
         <header>
             <h2>header</h2>
         </header>
@@ -12,7 +21,10 @@ <h2>aside</h2>
             <h2>footer</h2>
         </footer>
     </main>
-<p>
+
+   <p>
 Below is the sketch on which the grid above was based. <br> Notice the grid-lines!! 1 till 5 horizontally, 1 till 4 vertically! <br> See CSS code for column and row spanning along grid lines! Experiment yourself. <br> You can also export, share or download this codepen, see buttons below in the bottom-right corner.
 </p>
-<img src="https://user-images.githubusercontent.com/5694412/80422158-f5ba5200-88dd-11ea-87ed-aa9edf9f50cc.gif" class="example-image" alt="">
+<img src="https://user-images.githubusercontent.com/5694412/80422158-f5ba5200-88dd-11ea-87ed-aa9edf9f50cc.gif" class="example-image" alt="">
+</body>
+</html>   
diff --git a/basic-css-grid-example-study-of-grid-lines.markdown b/basic-css-grid-example-study-of-grid-lines.markdown
@@ -7,4 +7,6 @@ A [Pen](https://codepen.io/davidvdbor/pen/ZEEKzYL) by [David van den Bor](https:
 [License](https://codepen.io/davidvdbor/pen/ZEEKzYL/license).
 
 Here's the image as a reference to the layout that needs to be emulated: 
+
+
 ![css-grid-layout-example](https://user-images.githubusercontent.com/5694412/80422158-f5ba5200-88dd-11ea-87ed-aa9edf9f50cc.gif)
diff --git a/index.html b/index.html
@@ -15,4 +15,4 @@ <h2>footer</h2>
 <p>
 Below is the sketch on which the grid above was based. <br> Notice the grid-lines!! 1 till 5 horizontally, 1 till 4 vertically! <br> See CSS code for column and row spanning along grid lines! Experiment yourself. <br> You can also export, share or download this codepen, see buttons below in the bottom-right corner.
 </p>
-<img src="https://www.davidvandenbor.nl/hanze/cad5/css-grid-layout-example.gif" class="example-image" alt="">
+<img src="https://user-images.githubusercontent.com/5694412/80422158-f5ba5200-88dd-11ea-87ed-aa9edf9f50cc.gif" class="example-image" alt="">
diff --git a/basic-css-grid-example-study-of-grid-lines.markdown b/basic-css-grid-example-study-of-grid-lines.markdown
@@ -4,4 +4,7 @@ Basic CSS Grid example, study of grid lines
 
 A [Pen](https://codepen.io/davidvdbor/pen/ZEEKzYL) by [David van den Bor](https://codepen.io/davidvdbor) on [CodePen](https://codepen.io).
 
-[License](https://codepen.io/davidvdbor/pen/ZEEKzYL/license).
+[License](https://codepen.io/davidvdbor/pen/ZEEKzYL/license).
+
+Here's the image as a reference to the layout that needs to be emulated: 
+![css-grid-layout-example](https://user-images.githubusercontent.com/5694412/80422158-f5ba5200-88dd-11ea-87ed-aa9edf9f50cc.gif)
diff --git a/basic-css-grid-example-study-of-grid-lines.markdown b/basic-css-grid-example-study-of-grid-lines.markdown
@@ -0,0 +1,7 @@
+Basic CSS Grid example, study of grid lines
+-------------------------------------------
+
+
+A [Pen](https://codepen.io/davidvdbor/pen/ZEEKzYL) by [David van den Bor](https://codepen.io/davidvdbor) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/davidvdbor/pen/ZEEKzYL/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+    <main>
+        <header>
+            <h2>header</h2>
+        </header>
+        <article>
+            <h2>article</h2>
+        </article>
+        <aside>
+            <h2>aside</h2>
+        </aside>
+        <footer>
+            <h2>footer</h2>
+        </footer>
+    </main>
+<p>
+Below is the sketch on which the grid above was based. <br> Notice the grid-lines!! 1 till 5 horizontally, 1 till 4 vertically! <br> See CSS code for column and row spanning along grid lines! Experiment yourself. <br> You can also export, share or download this codepen, see buttons below in the bottom-right corner.
+</p>
+<img src="https://www.davidvandenbor.nl/hanze/cad5/css-grid-layout-example.gif" class="example-image" alt="">
diff --git a/style.css b/style.css
@@ -0,0 +1,49 @@
+main {
+	max-width: 700px;
+	margin: 20px auto 10px auto;
+	display: grid;
+	/* 
+	below: fr stands for "fraction" you can also use %, 
+	like so: 25% 25% 25% 25%. And also: 
+	"50% 25% 25%" is the SAME as: "2fr 1fr 1fr"
+	*/
+	grid-template-columns: 1fr 1fr 1fr 1fr;
+	grid-template-rows: 100px 400px 100px;
+	/* the 400px height is just as an preview example, don't forget to set it to "auto" if the content height in the orange <section> is variable!  */
+	grid-gap: 20px; /* you can also set this to zero for a seamless grid!! */
+}
+
+header {
+	background: violet;
+	grid-column: 1/5; /* grid lines indicating how many columns to span horizontally! */
+}
+
+article {
+	background: orange;
+	grid-column: 1/4;
+}
+
+aside {
+	background: green;
+	grid-column: 4/5;
+}
+
+footer {
+	background: red;
+	grid-column: 1/5;
+}
+
+* {
+	text-align: center;
+  font-family:serif
+}
+
+p {
+  margin-top:50px;
+}
+
+.example-image {
+  max-width: 806px;
+  width:100%;
+  height:auto
+}