启用类别横幅会导致类别图标重复

[Canapin (Coin-coin le Canapin)]

我不太了解网格布局。话虽如此……

如果您根本不显示类别描述，则可以将

.category-title-contents {
    display: grid;
    grid-template-areas:
        "logo title"
        "logo description";
    grid-template-columns: auto 1fr;
}

替换为

.category-title-contents {
    display: grid;
    grid-template-areas:
        "logo title";
    grid-template-columns: auto 1fr;
}

原始布局将容器分为 4 个单元格，这会导致标题错位：

删除“logo description”区域将其变为 2 个单元格：

这允许您通过替换来垂直对齐标题：

.category-title-contents .category-title {
    grid-area: title;
    align-self: end;
}

为

.category-title-contents .category-title {
    grid-area: title;
    align-self: center;
}