From cd9fe9c6d9e72871215a15b5ad100da940f3ac5d Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Thu, 27 Sep 2018 14:44:11 -0300
Subject: [PATCH] Replaces flex by grid layout on thumbnail view mode.

---
 src/assets/scss/_view-mode-grid.scss |  7 +++++++
 src/tainacan/view-mode-grid.php      | 26 ++++++++++++--------------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/assets/scss/_view-mode-grid.scss b/src/assets/scss/_view-mode-grid.scss
index 1d3f351..d5f09ea 100644
--- a/src/assets/scss/_view-mode-grid.scss
+++ b/src/assets/scss/_view-mode-grid.scss
@@ -1,6 +1,13 @@
 .tainacan-grid-container {
     min-height: 50vh;
     padding: 30px 4.166666667%;
+    display: -ms-grid;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 285px);
+    grid-gap: 0px;
+    justify-content: space-evenly;
+    animation-name: item-appear;
+    animation-duration: 0.5s;
 
     .row { justify-content: space-around }
     .col { flex-grow: 0; }
diff --git a/src/tainacan/view-mode-grid.php b/src/tainacan/view-mode-grid.php
index 8c3a9f0..cc65c1a 100644
--- a/src/tainacan/view-mode-grid.php
+++ b/src/tainacan/view-mode-grid.php
@@ -2,23 +2,21 @@
 
 	<div class="tainacan-grid-container">
 
-		<div class="row no-gutters">
 		<?php while ( have_posts() ) : the_post(); ?>
-			<div class="col">
-				<a class="tainacan-grid-item" href="<?php the_permalink(); ?>">
-					<p class="metadata-title">     
-						<?php the_title(); ?>           
-					</p>
-					<?php if ( has_post_thumbnail() ) : ?>
-						<?php the_post_thumbnail( 'tainacan-medium' ); ?> 
-					<?php else : ?>
-						<?php echo '<img alt="Thumbnail placeholder" src="' . get_template_directory_uri() . '/assets/images/thumbnail_placeholder.png">'?>
-					<?php endif; ?>  
-				</a>
-			</div>            
 			
+			<a class="tainacan-grid-item" href="<?php the_permalink(); ?>">
+				<p class="metadata-title">     
+					<?php the_title(); ?>           
+				</p>
+				<?php if ( has_post_thumbnail() ) : ?>
+					<?php the_post_thumbnail( 'tainacan-medium' ); ?> 
+				<?php else : ?>
+					<?php echo '<img alt="Thumbnail placeholder" src="' . get_template_directory_uri() . '/assets/images/thumbnail_placeholder.png">'?>
+				<?php endif; ?>  
+			</a>	
+		
 		<?php endwhile; ?>
-		</div>
+	
 	</div>
 
 <?php else : ?>