diff --git a/app/css/custom.php b/app/css/custom.php
index ae3049c2..3d82d7f9 100644
--- a/app/css/custom.php
+++ b/app/css/custom.php
@@ -193,12 +193,12 @@ pre.unstyled {
   width: 100%;
 }
 
-.card-deck--wifi-stations {
-  justify-content: space-between;
-}
-.card-deck--wifi-stations .card {
-  flex: 0 46%;
-  margin-bottom: .75rem;
+@media (min-width: 576px) {
+  .card-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 50%;
+    grid-gap: 1rem;
+  }
 }
 
 .sidebar.toggled .nav-item .nav-link span {
diff --git a/app/css/hackernews.css b/app/css/hackernews.css
index 395794b5..e2cf7ede 100644
--- a/app/css/hackernews.css
+++ b/app/css/hackernews.css
@@ -225,12 +225,12 @@ pre.unstyled {
   width: 100%;
 }
 
-.card-deck--wifi-stations {
-  justify-content: space-between;
-}
-.card-deck--wifi-stations .card {
-  flex: 0 46%;
-  margin-bottom: .75rem;
+@media (min-width: 576px) {
+  .card-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 50%;
+    grid-gap: 1rem;
+  }
 }
 
 .sidebar.toggled .nav-item .nav-link {
diff --git a/app/css/lightsout.css b/app/css/lightsout.css
index aea36af0..7f6fc555 100644
--- a/app/css/lightsout.css
+++ b/app/css/lightsout.css
@@ -429,12 +429,12 @@ pre {
   width: 100%;
 }
 
-.card-deck--wifi-stations {
-  justify-content: space-between;
-}
-.card-deck--wifi-stations .card {
-  flex: 0 46%;
-  margin-bottom: .75rem;
+@media (min-width: 576px) {
+  .card-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 50%;
+    grid-gap: 1rem;
+  }
 }
 
 .toggle-off.btn {
diff --git a/templates/wifi_stations.php b/templates/wifi_stations.php
index 56bf0a71..6949a51a 100755
--- a/templates/wifi_stations.php
+++ b/templates/wifi_stations.php
@@ -18,7 +18,7 @@
 
 <?php if (!empty($connected)): ?>
 <h4 class="h-underlined my-3"><?php echo _("Connected") ?></h4>
-<div class="card-deck card-deck--wifi-stations">
+<div class="card-grid">
 	<?php foreach ($connected as $network) : ?>
 	<?php echo renderTemplate("wifi_stations/network", compact('network', 'index')) ?>
 	<?php $index++; ?>
@@ -28,7 +28,7 @@
 
 <?php if (!empty($known)): ?>
 <h4 class="h-underlined my-3"><?php echo _("Known") ?></h4>
-<div class="card-deck card-deck--wifi-stations">
+<div class="card-grid">
 	<?php foreach ($known as $network) : ?>
 	<?php echo renderTemplate("wifi_stations/network", compact('network', 'index')) ?>
 	<?php $index++; ?>
@@ -38,7 +38,7 @@
 
 <?php if (!empty($nearby)): ?>
 <h4 class="h-underlined my-3"><?php echo _("Nearby") ?></h4>
-<div class="card-deck card-deck--wifi-stations">
+<div class="card-grid">
 	<?php foreach ($nearby as $network) : ?>
 	<?php echo renderTemplate("wifi_stations/network", compact('network', 'index')) ?>
 	<?php $index++; ?>