css - CSS Grid 是否允许带有 grid-template-rows 和 grid-area 的 grid-auto-columns？

Question

我有一个描述列表，需要垂直<dl>布局，其中键显示在顶部，值显示在每个对应键的下方。<dt><dd><dt>

我已经使用命名网格区域实现了这种布局：

.profile-details {
    grid-template-areas: "name-key occupation-key location-key" "name occupation location";
}

.profile-details dt[data-key="name"] {
    grid-area: name-key;
}

.profile-details dd[data-key="name"] {
    grid-area: name;
}

.profile-details dt[data-key="occupation"] {
    grid-area: occupation-key;
}

.profile-details dd[data-key="occupation"] {
    grid-area: occupation;
}

.profile-details dt[data-key="location"] {
    grid-area: location-key;
}

.profile-details dd[data-key="location"] {
    grid-area: location;
}

我想通过grid-template-rows在我的<dt>. 但是，grid-auto-columns不会在网格轨道上创建新列。

（代码笔）：

.profile-details {
    grid-template-rows: [keys] 1fr [values] 1fr;
    grid-auto-columns: 1fr;
    column-gap: 1em;
    row-gap: 0.5em;
}

CSS 网格是否grid-auto-columns支持grid-template-rows?

标签： csscss-grid