XF2 Tutorials Grid View Resources Page

[JowLix]

Want to Grid View Resources Page? Like below?

/******** 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
        }
    }
}

Apply this CSS to your extra.less file and bingo!