make grid-items and list-items usable elsewhere

youtube/shared.css

@@ -57,6 +57,35 @@ address{
         border-width:1px;
     }
     
+.item-list{
+    display: grid;
+    grid-auto-rows: 138px;
+    grid-row-gap: 10px;
+    
+}
+    .item-list .video-thumbnail-box{
+        width:246px;
+    }
+    .item-list .playlist-thumbnail-box{
+        width:246px;
+    }
+
+
+.item-grid{
+    display:grid;
+    grid-template-columns: repeat(auto-fill, 400px);
+    grid-auto-rows: 94px;
+    grid-row-gap: 10px;
+}
+    .item-grid .video-thumbnail-box{
+        width:168px;
+    }
+    .item-grid .playlist-thumbnail-box{
+        width:168px;
+    }
+
+
+
 
 .full-item{
     display: grid;

yt_channel_items_template.html

@@ -72,18 +72,6 @@
                 .item-grid{
                     grid-row:4;
                     grid-column: 1 / span 2;
-                    
-                    display:grid;
-                    grid-template-columns: repeat(auto-fill, 400px);
-                    grid-auto-rows: 94px;
-                    grid-row-gap: 10px;
-                
-                }
-                    .item-grid .video-thumbnail-img{
-                        width:168px;
-                    }
-                    .item-grid .playlist-thumbnail-img{
-                        width:168px;
                 }
                 .page-button-row{
                     grid-column: 1 / span 2;

yt_search_results_template.html

@@ -52,22 +52,9 @@
                 grid-row: 1;
 
             }
-            #results{
+            .item-list{
-                
                 grid-row: 2;
                 grid-column: 2;
-                
-                
-                display: grid;
-                grid-auto-rows: 138px;
-                grid-row-gap: 10px;
-                
-            }
-            #results .video-thumbnail-box{
-                width:246px;
-            }
-            #results .playlist-thumbnail-box{
-                width:246px;
             }
             .badge{
                 background-color:#cccccc;
@@ -90,7 +77,7 @@
                     <div id="number-of-results">Approximately $number_of_results results ($number_of_pages pages)</div>
 $corrections
                 </div>
-                <div id="results">          
+                <div class="item-list">          
 $results
                 </div>
                 <nav class="page-button-row">