🔲 Used css-grid for laying out cover grid

src/client/assets/scss/App.scss

@@ -24,20 +24,24 @@ $border-color: red;
   }
 }
 
-.card {
+.card-container {
-  max-width: 200px;
+  display: grid;
-  margin: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  float: left;
+  column-gap: 0.5em;
-
+  row-gap: 1.2em;
-  .truncate {
+  .card {
-    width: 100px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  img {
     max-width: 200px;
+
+    .truncate {
+      width: 100px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    img {
+      max-width: 200px;
+    }
   }
 }
 

src/client/components/Card.tsx

@@ -46,7 +46,7 @@ class Card extends React.Component<IProps, IState> {
   };
 
   public render() {
-    return <div>{this.drawCoverCard(this.props.comicBookCoversMetadata)}</div>;
+    return <>{this.drawCoverCard(this.props.comicBookCoversMetadata)}</>;
   }
 }
 

src/client/components/Import.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import _ from "lodash";
+import { isUndefined } from "lodash";
 import { connect } from "react-redux";
 import { fetchComicBookMetadata } from "../actions/fileops.actions";
 import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
@@ -48,7 +48,7 @@ class Import extends React.Component<IProps, IState> {
 
   public render() {
     return (
-      <div>
+      <div className="container">
         <section className="section is-small">
           <h1 className="title">Import</h1>
 
@@ -89,10 +89,10 @@ class Import extends React.Component<IProps, IState> {
             </button>
           </p>
 
-          {!_.isUndefined(this.state.folderWalkResults) ? (
+          {!isUndefined(this.state.folderWalkResults) ? (
-            <>
+            <div className="card-container">
               <Card comicBookCoversMetadata={this.props.garam} />
-            </>
+            </div>
           ) : null}
         </section>
       </div>