Apply this CSS to your extra.less file and bingo!
Less:
/******** XFRM_GridView.less ********/
@media (min-width: 650px) {
@supports (display: grid) {
.block[data-type="resource"] .structItemContainer {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
grid-gap: 10px;
padding: 10px;
background-color: hsl(var(--xf-contentAltBg))
}
.structItem--resource {
background-color: hsl(var(--xf-contentBg));
border-radius: 3px;
box-shadow: 0 2px 8px hsla(0,0%,0%,.1);
border-width: 0px;
display: grid;
grid-template-columns: 90px 1fr;
grid-template-areas: 'icon text' 'stats stats'
}
.structItem--resource .structItem-cell--icon.structItem-cell--iconExpanded {
width: auto;
grid-area: icon
}
.structItem--resource .structItem-cell--main {
grid-area: text
}
.structItem--resource .structItem-cell--resourceMeta {
grid-area: stats;
width: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between
}
.structItem--resource .structItem-cell--iconExpanded .structItem-iconContainer .avatar {
width: 100%;
height: auto;
font-size: 56px
}
.structItem--resource .structItem-secondaryIcon {
display: none
}
.structItem--resource .structItem-metaItem--rating {
flex: 1 0 100%
}
.structItem--resource .structItem-metaItem--downloads,.structItem--resource .structItem-metaItem--lastUpdate {
flex: 0 1 auto
}
.structItem--resource .ratingStarsRow--justified {
border-bottom: 1px solid hsl(var(--xf-borderColorFaint));
margin-bottom: 4px;
padding-bottom: 4px
}
}
}