From 4a6e293d9dc26a90f8c026ad6ac4576cc919386c Mon Sep 17 00:00:00 2001
From: Zachary Vance <za3k@za3k.com>
Date: Fri, 21 Jul 2023 19:36:51 -0400
Subject: [PATCH] Finish cheatsheet

---
 html-css-cheatsheet.html | 50 ++++++++++++++++++++++++++++++++++++++--
 index.html               |  1 +
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/html-css-cheatsheet.html b/html-css-cheatsheet.html
index c522b55..8e83255 100644
--- a/html-css-cheatsheet.html
+++ b/html-css-cheatsheet.html
@@ -710,11 +710,57 @@ tr:nth-child(odd)  { background-color: lightyellow; }</code></pre>
 </div>
 
 <div>
-    <h3>TODO: Grid layout</h3>
+    <h3>Grid layout</h3>
+    <style>
+    div.wrapper { display: grid; 
+                  grid-template-columns: repeat(3, 1fr);
+                  gap: 10px;
+                  grid-auto-rows: minmax(10px, auto); }
+    div.wrapper div { opacity: 50%; }
+    div.red    { grid-column: 1 / 3;
+                 grid-row: 1; }
+    div.blue   { grid-column: 2 / 4;
+                 grid-row: 1 / 3; }
+    div.yellow { grid-column: 1 / 3;
+                 grid-row: 2; }
+    </style>
+
+    <div class="demo wrapper">
+        <div class="demo red"></div>
+        <div class="demo blue"></div>
+        <div class="demo yellow"></div>
+    </div>
+
+    <pre><code>div.wrapper { display: grid; 
+              grid-template-columns: repeat(3, 1fr);
+              gap: 10px;
+              grid-auto-rows: minmax(10px, auto); }
+div.red     { grid-column: 1 / 3;
+              grid-row: 1; }
+div.blue    { grid-column: 2 / 4;
+              grid-row: 1 / 3; }
+div.yellow  { grid-column: 1 / 3;
+              grid-row: 2; }</code></pre>
+
+    I don't really know grid layout yet.
 </div>
 
 <div>
-    <h3>TODO: Overflow and Scrolling</h3>
+    <h3>Overflow and Scrolling</h3>
+
+    <div class="demo" style="height: 50px; border: 1px solid; overflow: hidden;">
+    Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,
+
+    Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,
+    </div>
+    <pre><code>div { overflow: hidden; }</code></pre>
+
+    <div class="demo" style="height: 50px; border: 1px solid; overflow: scroll; ">
+    Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,
+
+    Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,
+    </div>
+    <pre><code>div { overflow: scroll; }</code></pre>
 </div>
 
 <div>
diff --git a/index.html b/index.html
index 260c86b..c8072fe 100644
--- a/index.html
+++ b/index.html
@@ -57,6 +57,7 @@
             <li><a href="/games/">games</a> i've designed</li>
             <li><a href="https://github.com/za3k/cookbook">a cookbook</a> i wrote</li>
             <li><a href="/hackaday">hack-a-day</a>, a 2022 programming challenge</li>
+            <li><a href="/html-css-cheatsheet">cheatsheet</a> for HTML+CSS</li>
         </ul>
     </section>
 
-- 
2.47.3