From 712c84bbc378d4e3f02fcccca865e63378c6198b Mon Sep 17 00:00:00 2001
From: Eric Cornelissen <ericornelissen@gmail.com>
Date: Thu, 30 Nov 2017 16:19:01 +0100
Subject: [PATCH] Fix grid item overflow due to text

Fixed the bug reported in #682 where grid items could overflow due to
long titles.

Solved the problem by allowing for wrapping in grid item titles, and
centering the contents of grid-items using flexbox. Also slightly
increased the size of grid-items.
---
 index.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 4e2ceecc..cf082a70 100644
--- a/index.html
+++ b/index.html
@@ -349,7 +349,7 @@
             .grid {
                 display: grid;
                 grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
-                grid-auto-rows: 6rem;
+                grid-auto-rows: 6.25rem;
                 grid-column-gap: 0.375rem;
                 grid-row-gap: 0.375rem;
                 grid-auto-flow: dense;
@@ -367,6 +367,10 @@
 
         .grid-item {
             background-color: #757575;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding: 1rem;
             text-align: center;
         }
         .grid-item--light {
@@ -405,7 +409,6 @@
 
         .grid-item__link {
             display: block;
-            padding: 1rem 1rem 0;
             text-align: center;
             width: 100%;
         }
@@ -422,7 +425,6 @@
             margin: 0;
             overflow: hidden;
             text-overflow: ellipsis;
-            white-space: nowrap;
         }
 
         .grid-item__subtitle {