snippets are centered

src/static/css/feature.css

@@ -179,14 +179,17 @@ ul { list-style-position: inside; }
     grid-area: 6 / 2 / 7 / 3;
     background-color: #F5D7E3;
     display: grid;
-    grid-template-columns: auto;
+    grid-template-columns: auto repeat(3, 100px) auto;
-    grid-template-rows: 15% 35% auto;
+    grid-template-rows: auto;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
-    overflow-y: scroll;
+    padding-top: 25px;
-    overflow-x: hidden;
 } 
 
+.snip1 { grid-area: 1 / 2 / 2 / 3; }
+.snip2 { grid-area: 1 / 3 / 2 / 4; }
+.snip3 { grid-area: 1 / 4 / 2 / 5; } 
+
 .footer-row {
     grid-area: 7 / 1 / 8 / 5; 
     background-color: #A8577E;

src/views/feature.tpl

@@ -9,14 +9,30 @@
 % include diary-boxes.tpl
 
     <div class="recommend">
-    % for r in recommends:
+        <div class="snip1">
             <div class="snippet-title">
-            <a href={{r[2]}} rel="nofollow"><b>{{!r[0]}}</b></a>
+                <a href={{recommends[0][2]}} rel="nofollow"><b>{{!recommends[0][0]}}</b></a>
             </div>
             <div class="snippet-content">
-            {{!r[1]}}
+                {{!recommends[0][1]}}
+            </div>
+        </div>
+        <div class="snip2">
+            <div class="snippet-title">
+                <a href={{recommends[1][2]}} rel="nofollow"><b>{{!recommends[1][0]}}</b></a>
+            </div>
+            <div class="snippet-content">
+                {{!recommends[1][1]}}
+            </div>
+        </div>
+        <div class="snip3">
+            <div class="snippet-title">
+                <a href={{recommends[2][2]}} rel="nofollow"><b>{{!recommends[2][0]}}</b></a>
+            </div>
+            <div class="snippet-content">
+                {{!recommends[2][1]}}
+            </div>
         </div>
-    % end
     </div>
 
     <div class="footer-row"> </div>