Updated gallery styles

Updated gallery item styles to generate a block-level grid
Automattic · May 3, 2020 · 74dbdc5 · 74dbdc5
1 parent a9699ff
commit 74dbdc5
Showing 1 changed file with 22 additions and 21 deletions.
diff --git a/style.css b/style.css
@@ -905,46 +905,47 @@ object {
 ## Galleries
 --------------------------------------------------------------*/
 .gallery {
-	margin-bottom: 1.5em;
+    margin-bottom: 1.5em;
+	display: grid;
+	grid-gap: 25px;
 }
 
 .gallery-item {
-	display: inline-block;
-	text-align: center;
-	vertical-align: top;
-	width: 100%;
+    display: inline-block;
+    text-align: center;
+    width: 100%;
 }
 
-.gallery-columns-2 .gallery-item {
-	max-width: 50%;
+.gallery.gallery-columns-2 {
+    grid-template-columns: repeat(2,1fr);
 }
 
-.gallery-columns-3 .gallery-item {
-	max-width: 33.33%;
+.gallery.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 {