Nicer grid view

app/assets/stylesheets/my_styles.scss

@@ -259,7 +259,7 @@ div.thumb-height
 .grid-thumbnail
 {
   // Pretend that all thumbnails are 120 pixels high to align the captions properly
-  height: 130px;
+  height: 260px;
 }
 
 // Avoid painting links to detail packages in the primary color
@@ -539,3 +539,34 @@ a.black
   animation-delay: 4s;
   animation-fill-mode: both;
 }
+
+/* Grid view */
+.pkgcard {
+  .image {
+    height: 260px;
+    // width: 100%;
+    background: #e0e0e0;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // display: table-cell;
+    // vertical-align: middle;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .text {
+    padding: 10px;
+    text-align: center;
+  }
+  .pkgname {
+    font-size: 120%;
+    padding: 10px;
+  }
+  // width: 100%;
+  margin-bottom: 20px;
+  display: table;
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+  padding: 5px;
+}

app/views/packages/grid.slim

@@ -12,9 +12,9 @@
 .grid-x
   .small-9.large-10.cell
     - if @packages.length>0
-      .grid-x.grid-margin-x.small-up-1.medium-up-3.large-up-4
+      .grid-x.grid-margin-x.small-up-1.medium-up-2.large-up-3 data-equalizer=true data-equalize-on="medium"
         - @packages.all.each do |pkg|
-          .cell
+          .cell.pkgcard data-equalizer-watch=true
             = render partial: 'packages/grid_thumbnail', locals: { pkg: pkg }
 
     - else