如何为共享相同网格模板区域的多个类使用特定的行和列？

Question

我有一个网格模板区域

main { grid-area: mn; display: grid; grid-template-areas: "dt dt dt dt dt dt dt dt as as as as" "dt dt dt dt dt dt dt dt as as as as" "dt dt dt dt dt dt dt dt as as as as" "dt dt dt dt dt dt dt dt as as as as" "dt dt dt dt dt dt dt dt as as as as" "dt dt dt dt dt dt dt dt as as as as" "dt dt dt dt dt dt dt dt ad ad ad ad" "dt dt dt dt dt dt dt dt ad ad ad ad" "dt dt dt dt dt dt dt dt ad ad ad ad" "dt dt dt dt dt dt dt dt ad ad ad ad"; grid-template-rows: 1fr; grid-template-columns: 1fr; }

我有几类 HTML 元素共享“dt”网格模板区域，任何人都可以具体说明我可以在哪里放置共享相同区域的特定元素

例如

.program-logo {
    grid-area: dt;

}
.program-heading {
    grid-area: dt;

}

两者共享相同的 dt 区域，但我不希望它们彼此位于同一行和同一列。我该怎么做才能在 CSS 代码中清楚地区分它们......