Чтобы в макете ресурсов была сетка, как у нас в макете с [TH] узлом и двумя столбцами.
Вот простой CSS, который вам нужно поместить в Extra.less,
Вот простой CSS, который вам нужно поместить в Extra.less,
CSS:
@media (min-width: 650px) {
@supports (display: grid) {
.block[data-type="resource"] .structItemContainer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
grid-gap: 10px;
padding: 10px;
background-color: #353941;
}
.structItem--resource {
background-color: #2d3037;
border-radius: 3px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-width: 0px;
display: grid;
grid-template-columns: 108px 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 #424650;
margin-bottom: 4px;
padding-bottom: 4px;
}
}
}