diff --git a/frappe/public/css/list.css b/frappe/public/css/list.css
index fe52ee026c..e33f752ccb 100644
--- a/frappe/public/css/list.css
+++ b/frappe/public/css/list.css
@@ -334,6 +334,23 @@
     border-bottom: 1px solid #EBEFF2;
   }
 }
+.image-view-container.three-column .image-view-item {
+  flex: 0 0 33.33333333%;
+}
+.image-view-container.three-column .image-view-item:nth-child(3n) {
+  border-right: none;
+}
+.image-view-container.three-column .image-view-item:nth-last-child(-n + 3):nth-child(3n + 1),
+.image-view-container.three-column .image-view-item:nth-last-child(-n + 3):nth-child(3n + 1) ~ .image-view-item {
+  border-bottom: none;
+}
+.image-view-container.three-column .image-view-item:nth-child(4n) {
+  border-right: 1px solid #EBEFF2;
+}
+.image-view-container.three-column .image-view-item:nth-last-child(-n + 4):nth-child(4n + 1),
+.image-view-container.three-column .image-view-item:nth-last-child(-n + 4):nth-child(4n + 1) ~ .image-view-item {
+  border-bottom: 1px solid #EBEFF2;
+}
 .pswp--svg .pswp__button,
 .pswp--svg .pswp__button--arrow--left:before,
 .pswp--svg .pswp__button--arrow--right:before {
diff --git a/frappe/public/less/list.less b/frappe/public/less/list.less
index 63336aaeaf..db4bf25a5a 100644
--- a/frappe/public/less/list.less
+++ b/frappe/public/less/list.less
@@ -398,25 +398,29 @@
 
 	// 3 columns for small screen
 	@media(max-width: @screen-sm) {
-		.image-view-item {
-			flex: 0 0 100%/3;
-		}
+		.image-view-container.three-column;
+	}
+}
 
-		.image-view-item:nth-child(3n) {
-			border-right: none;
-		}
-		.image-view-item:nth-last-child(-n + 3):nth-child(3n + 1),
-		.image-view-item:nth-last-child(-n + 3):nth-child(3n + 1) ~ .image-view-item {
-			border-bottom: none;
-		}
+.image-view-container.three-column {
+	.image-view-item {
+		flex: 0 0 100%/3;
+	}
 
-		.image-view-item:nth-child(4n) {
-			border-right: 1px solid @light-border-color;
-		}
-		.image-view-item:nth-last-child(-n + 4):nth-child(4n + 1),
-		.image-view-item:nth-last-child(-n + 4):nth-child(4n + 1) ~ .image-view-item {
-			border-bottom: 1px solid @light-border-color;
-		}
+	.image-view-item:nth-child(3n) {
+		border-right: none;
+	}
+	.image-view-item:nth-last-child(-n + 3):nth-child(3n + 1),
+	.image-view-item:nth-last-child(-n + 3):nth-child(3n + 1) ~ .image-view-item {
+		border-bottom: none;
+	}
+
+	.image-view-item:nth-child(4n) {
+		border-right: 1px solid @light-border-color;
+	}
+	.image-view-item:nth-last-child(-n + 4):nth-child(4n + 1),
+	.image-view-item:nth-last-child(-n + 4):nth-child(4n + 1) ~ .image-view-item {
+		border-bottom: 1px solid @light-border-color;
 	}
 }