Finish cheatsheet

diff --git a/html-css-cheatsheet.html b/html-css-cheatsheet.html
index c522b551c69cfd3c3fbe82a96756d7df6d23fbb2..8e83255dba974763d8162f46cc2db19fc68b854b 100644 (file)
--- 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 260c86b32bc7681c666eed45b1917eeb659e79cf..c8072fe27a6d1d6b14207d4a9550393e2d4dd2d1 100644 (file)
--- 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>