为什么 Chrome 开发工具抱怨我不应该在带有 display: block 的元素上使用 grid-column-end ？

Question

我正在处理一些 css-grid 格式的内容。我有如下规则，应用于网格内的元素：

<some selector here> {
    grid-column-end: span 4;
}

当我这样做时，我在 Chrome 开发工具 (Chrome 108) 中看到的内容如下：

将鼠标悬停在“circle-i”上会显示以下消息：“ display: block属性阻止grid-column-end产生效果。尝试将display设置为block之外的其他内容。”

我不明白这条消息，也找不到任何可以解释它的文档。我看不出还有什么其他显示类型适合这种情况。这是一个问题，还是一个 Chrome 错误？

Answer 1

对于可能需要超过 1 列的选择器，您应该尝试设置以下选项之一：

• 内联块
• 内联柔性
• 内联网格
• 内联表

这对我有用。