Style: minor edits

Author: jessicarush

css_grid/base.css

@@ -178,12 +178,38 @@ a:active {
 }
 
 .container-h {
+  /* breakpoint */
+  --w: 400px;
+  /* num of columns when over breakpoint */
+  --n: 5;
+  /* num of columns when under breakpoint */
+  --m: 1;
+
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(
+      clamp(
+        100% / (var(--n) + 1) + 0.1%,
+        (var(--w) - 100vw) * 1000,
+        100% / (var(--m) + 1) + 0.1%
+      ),
+      1fr
+    )
+  ); 
+  gap: 5px;
+}
+
+.container-i {
   /* first breakpoint */
   --w1: 800px;
+  /* number of columns when over first breakpoint */
   --n: 5;
   /* second breakpoint */
   --w2: 400px;
+  /* number of columns when over second breakpoint */
   --m: 2;
+  /* cols will be 100% when under second breakpoint */
 
   display: grid;
   grid-template-columns: repeat(

css_grid/index.html

@@ -166,6 +166,16 @@ <h1> Named areas.</h1>
     <div class="basic-box">A</div>
   </div>
 
+  <div class="container-i base">
+    <div class="basic-box">A</div>
+    <div class="basic-box">A</div>
+    <div class="basic-box">A</div>
+    <div class="basic-box">A</div>
+    <div class="basic-box">A</div>
+    <div class="basic-box">A</div>
+    <div class="basic-box">A</div>
+  </div>
+
   <p> See <a href="https://css-tricks.com/responsive-layouts-fewer-media-queries/" target="_blank" rel="noopener noreferrer">Responsive Layouts, Fewer Media Queries</a>
 
 

css_truncate_text/base.css

@@ -27,12 +27,14 @@ html {
 
 /* TYPOGRAPHY ------------------------------------------------------------- */
 
+.max-width {
+  max-width: 200px;
+}
 .truncate-text {
   /* display: inline-block; */
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  width: 220px;
 }
 
 

css_truncate_text/index.html

@@ -17,9 +17,9 @@ <h1 class="primary-heading">
     <nav></nav>
   </header>
 
-  <main>
+  <main class="max-width">
 
-    <p class="truncate-text">If I exceed a specified width, I will be truncated.</p>
+    <p class="truncate-text">If I don't fit, I will be truncated.</p>
 
   </main>