From 50ce93c7cd478871c9ae7504f0ef4748f5de449f Mon Sep 17 00:00:00 2001
From: Sajedeh Gooklani <gookalani@mail.com>
Date: Mon, 4 May 2020 02:26:48 +0300
Subject: [PATCH] Use CSS grid for gallery styles (#1246)

Co-authored-by: Ismail El Korchi <ismail.elkorchi@gmail.com>
---
 sass/media/_galleries.scss | 13 +++++++------
 style.css                  | 35 ++++++++++++++++++-----------------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/sass/media/_galleries.scss b/sass/media/_galleries.scss
index f42aa463..c09769d3 100644
--- a/sass/media/_galleries.scss
+++ b/sass/media/_galleries.scss
@@ -1,19 +1,20 @@
 .gallery {
 	margin-bottom: 1.5em;
+	display: grid;
+	grid-gap: 1.5em;
 }
 
 .gallery-item {
 	display: inline-block;
 	text-align: center;
-	vertical-align: top;
 	width: 100%;
+}
 
-	// Loops to enumerate the classes for gallery columns.
-	@for $i from 2 through 9 {
+// Loops to enumerate the classes for gallery columns.
+@for $i from 2 through 9 {
 
-		.gallery-columns-#{$i} & {
-			max-width: map-get($columns, $i);
-		}
+	.gallery-columns-#{$i} {
+		grid-template-columns: repeat($i, 1fr);
 	}
 }
 
diff --git a/style.css b/style.css
index 792c4c51..b8c4dea4 100644
--- a/style.css
+++ b/style.css
@@ -906,45 +906,46 @@ object {
 --------------------------------------------------------------*/
 .gallery {
 	margin-bottom: 1.5em;
+	display: grid;
+	grid-gap: 1.5em;
 }
 
 .gallery-item {
 	display: inline-block;
 	text-align: center;
-	vertical-align: top;
 	width: 100%;
 }
 
-.gallery-columns-2 .gallery-item {
-	max-width: 50%;
+.gallery-columns-2 {
+	grid-template-columns: repeat(2, 1fr);
 }
 
-.gallery-columns-3 .gallery-item {
-	max-width: 33.33%;
+.gallery-columns-3 {
+	grid-template-columns: repeat(3, 1fr);
 }
 
-.gallery-columns-4 .gallery-item {
-	max-width: 25%;
+.gallery-columns-4 {
+	grid-template-columns: repeat(4, 1fr);
 }
 
-.gallery-columns-5 .gallery-item {
-	max-width: 20%;
+.gallery-columns-5 {
+	grid-template-columns: repeat(5, 1fr);
 }
 
-.gallery-columns-6 .gallery-item {
-	max-width: 16.66%;
+.gallery-columns-6 {
+	grid-template-columns: repeat(6, 1fr);
 }
 
-.gallery-columns-7 .gallery-item {
-	max-width: 14.28%;
+.gallery-columns-7 {
+	grid-template-columns: repeat(7, 1fr);
 }
 
-.gallery-columns-8 .gallery-item {
-	max-width: 12.5%;
+.gallery-columns-8 {
+	grid-template-columns: repeat(8, 1fr);
 }
 
-.gallery-columns-9 .gallery-item {
-	max-width: 11.11%;
+.gallery-columns-9 {
+	grid-template-columns: repeat(9, 1fr);
 }
 
 .gallery-caption {