client/scss/asset-preview/_asset-preview.scss

@@ -1,16 +1,16 @@
 .asset-preview-image {
   width  : 100%;
-  padding: 0px;
+  padding: 0;
-  margin : 0px
+  margin : 0;
 }
 
 .asset-preview-video {
   cursor: pointer;
   background-color: #ffffff;
-  width: calc(100% - 12px - 12px - 2px);
+  width: 100%;
 }
 
-h3.list-title {
+h6.list-title {
   margin: 0;
   text-overflow: ellipsis;
   word-wrap: break-word;

client/scss/channel-claims-display/_channel-claims-display.scss

@@ -1,5 +1,26 @@
 .channel-claims-display {
+  display: grid;
+  grid-gap: 16px;
+
   .button--secondary {
     margin-right: $secondary-padding;
   }
 }
+
+@media (min-width: 1040px) {
+  .channel-claims-display {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1039px) {
+  .channel-claims-display {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 767px) {
+  .channel-claims-display {
+    grid-template-columns: 1fr;
+  }
+}

client/src/components/AssetPreview/index.jsx

@@ -5,7 +5,7 @@ const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, c
   const embedUrl = `/${claimId}/${name}.${fileExt}`;
   const showUrl = `/${claimId}/${name}`;
   return (
-    <Link to={showUrl} >
+    <Link to={showUrl} className='asset-preview'>
       {(() => {
         switch (contentType) {
           case 'image/jpeg':

client/src/containers/ChannelClaimsDisplay/view.jsx

@@ -27,59 +27,16 @@ class ChannelClaimsDisplay extends React.Component {
   }
   render () {
     const {channel: {claimsData: {claims, currentPage, totalPages}}, defaultThumbnail} = this.props;
-    const groupedClaimsList = createGroupedList(claims, 4);
     if (claims.length > 0) {
       return (
         <div className={'channel-claims-display'}>
-          <div>
+          {claims.map(claim => (
-            {groupedClaimsList.map((group, index) => {
-              const itemA = group[0];
-              const itemB = group[1];
-              const itemC = group[2];
-              const itemD = group[3];
-              return (
-                <HorizontalQuadSplit
-                  key={`claims-row-${index}`}
-                  columnA={
-                    itemA && (
             <AssetPreview
               defaultThumbnail={defaultThumbnail}
-                        claimData={itemA}
+              claimData={claim}
-                        key={`${itemA.name}-${itemA.id}`}
+              key={`${claim.name}-${claim.id}`}
             />
-                    )
+          ))}
-                  }
-                  columnB={
-                    itemB && (
-                      <AssetPreview
-                        defaultThumbnail={defaultThumbnail}
-                        claimData={itemB}
-                        key={`${itemB.name}-${itemB.id}`}
-                      />
-                    )
-                  }
-                  columnC={
-                    itemC && (
-                      <AssetPreview
-                        defaultThumbnail={defaultThumbnail}
-                        claimData={itemC}
-                        key={`${itemC.name}-${itemC.id}`}
-                      />
-                    )
-                  }
-                  columnD={
-                    itemD && (
-                      <AssetPreview
-                        defaultThumbnail={defaultThumbnail}
-                        claimData={itemD}
-                        key={`${itemD.name}-${itemD.id}`}
-                      />
-                    )
-                  }
-                />
-              );
-            })}
-          </div>
           <Row>
             {(currentPage > 1) &&
             <ButtonSecondary