diff --git a/docs-ui/src/components/ComponentCards/ComponentCards.module.css b/docs-ui/src/components/ComponentCards/ComponentCards.module.css
index cf003472b4..688010110c 100644
--- a/docs-ui/src/components/ComponentCards/ComponentCards.module.css
+++ b/docs-ui/src/components/ComponentCards/ComponentCards.module.css
@@ -1,11 +1,29 @@
 .grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(1, 1fr);
   gap: 1rem;
   margin-top: 1rem;
   margin-bottom: 3rem;
 }
 
+@media (min-width: 768px) {
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 1280px) {
+  .grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
 .card {
   display: flex;
   flex-direction: column;