fix: improve how columns resize at different container widths

RedHat-UX · Sep 25, 2024 · 30a03dd · 30a03dd
1 parent 7ee3658
commit 30a03dd
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/docs/foundations/color/index.md b/docs/foundations/color/index.md
@@ -26,7 +26,7 @@ crayons:
 <style data-helmet>
 #crayons-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(358px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: var(--rh-space-2xl);
   & .crayons-list {
     margin: 0;
@@ -44,6 +44,18 @@ crayons:
     }
   }
 }
+@container (min-width: 576px) and (max-width: 746px) {
+  #crayons-grid {
+    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
+  }
+}
+/*
+@container section (min-width:747px) {
+  #crayons-grid {
+    grid-template-columns: repeat(auto-fill, minmax(352px, 1fr));
+  }
+}
+*/
 </style>
 
 ## Introduction