Align items in multiple rows for wider displays

src/components/list-view.html

@@ -2,11 +2,16 @@
     <template>
         <style>
             .list {
-                padding-top: 47px;
                 overflow: scroll;
                 -webkit-overflow-scrolling: touch;
                 height: 100%;
                 box-sizing: border-box;
+                font-size: 0;
+                padding: 47px 5px 5px 5px;
+            }
+
+            .list > * {
+                font-size: 18px;
             }
         </style>
         <div id="list" class="list">

src/components/record-item.html

@@ -2,23 +2,58 @@
     <template>
         <style>
             :host {
-                display: block;
+                display: inline-block;
+                width: 100%;
+                box-sizing: border-box;
+            }
+
+            @media (min-width: 700px) and (max-width: 1000px) {
+                :host {
+                    width: 50%;
+                }
+
+                :host:nth-child(2n) .inner {
+                    margin-right: 5px;
+                }
+            }
+
+            @media (min-width: 1000px) and (max-width: 1300px) {
+                :host {
+                    width: 33.33%;
+                }
+
+                :host:nth-child(3n) .inner, :host:nth-child(3n-1) .inner {
+                    margin-right: 5px;
+                }
+            }
+
+            @media (min-width: 1300px) {
+                :host {
+                    width: 25%;
+                }
+
+                :host:nth-child(4n) .inner, :host:nth-child(4n-1) .inner, :host:nth-child(4n-2) .inner {
+                    margin-right: 5px;
+                }
+            }
+
+            .inner {
                 padding: 13.5px 15px;
                 min-height: 23px;
                 background: #fff;
                 border-bottom: solid 1px rgba(0, 0, 0, 0.1);
-                margin: 5px;
+                margin-top: 5px;
             }
 
             /*:host:not(:last-child) {
                 border-bottom: solid 1px rgba(0, 0, 0, 0.1);
             }*/
 
-            :host:hover {
+            .inner:hover {
                 background: rgba(0, 0, 0, 0.05);
             }
 
-            :host:active:hover:not(.disabled) {
+            .inner:active:hover:not(.disabled) {
                 background: rgba(0, 0, 0, 0.1);
             }
 
@@ -30,10 +65,13 @@
                 line-height: 50px;
                 text-align: center;
                 margin: -13.5px -15px 0 0;
+                display: none;
             }
         </style>
-        {{record.name}}
-        <div class="delete" on-click="{{ deleteClicked }}">x</div>
+        <div class="inner">
+            {{record.name}}
+            <div class="delete" on-click="{{ deleteClicked }}">x</div>
+        </div>
     </template>
     <script>
         Polymer('safe-record-item', {