Tidy up image display using grid

app/assets/stylesheets/images.css.sass

@@ -5,20 +5,16 @@
 ul.images
   list-style: none
   padding-left: 0
-  display: flex
+  display: grid
-  flex-wrap: wrap
+  grid-template-columns: repeat(6, 1fr)
+  grid-gap: 0.75rem
   justify-content: space-between
 
-  display: -webkit-flex
-  -webkit-flex-wrap: wrap
-  -webkit-justify-content: space-between
-
   li
-    outline: 1px solid red
     margin-bottom: 1em
 
   img
-    max-width: 100px
+    max-width: calc(100% - 0.5rem)
-    width: 100%
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)
-    border: 1px solid rgba(0, 0, 0, 0.2)
+    border-radius: 2px
     padding: 0.25rem

app/views/images/index.html.erb

@@ -3,7 +3,7 @@
 <ul class="images">
   <% @images.each do |image| %>
     <li>
-      <%= link_to image_tag(image.image.thumb('100x100#').url), image.image.url, class: :image %><br>
+      <%= link_to image_tag(image.image.thumb('200x200#').url), image.image.url, class: :image %><br>
       <%= link_to 'Delete', user_image_path(image), method: :delete, data: { confirm: 'Are you sure?' } %>
     </li>
   <% end %>