switch to grid layout

static/site.css

@@ -11,34 +11,28 @@ a {
 }
 
 dl.emojo {
-    column-width: 220px;
+    display: grid;
-    column-gap: 20px;
+    grid-template-columns: repeat(auto-fit, minmax(15em, max-content));
-    column-rule: 1px solid gray;
+    grid-row-gap: 5px;
 }
 
 dl.emojo div {
-    height: 20px;
+    cursor: pointer;
-    padding-bottom: 5px;
 }
 
-dl.emojo dt {
+dl.emojo div * {
-    width: 28px;
+    display: inline-block;
-    height: 20px;
-    display: table-cell;
-    vertical-align: middle;
 }
 
 dl.emojo dt img {
     height: 20px;
-    width: 20px;
+    width: 28px;
     object-fit: contain;
-    margin: -3px 0 0;
 }
 
 dl.emojo dd {
-    height: 20px;
+    margin-left: 0;
-    display: table-cell;
+    padding: 0px 8px;
-    vertical-align: middle;
 }
 
 dl.emojo dd.success {

templates/emojo.html

@@ -8,7 +8,7 @@
 <dl class="emojo">
     {% for emoj in emojo %}
     <div>
-        <dt><img src="{{ emoj['static_url'] }}" alt=":{{ emoj['shortcode'] }}:"></dt>
+        <dt><img src="{{ emoj.static_url }}" alt=":{{ emoj.shortcode }}:"></dt>
         <dd>:{{ emoj.shortcode }}:</dd>
     </div>
     {% endfor %}