为什么 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 的 bug？

Answer 1

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

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

这对我有用。

Answer 2

确保选择器是网格的 direct 后代。这给我带来了问题。

Answer 3

虽然我不确定这是否是 Chrome 错误，但值得注意的是，MDN 上使用

grid-column-end

的示例不包含任何有关确保

display

属性未设置为

block

的信息即使他们在示例中使用

<div>

。您可以在此处查看示例代码：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end#examples

Answer 4

我遇到了同样的问题，我只是认为导致我的问题的是

width

，它与我想要应用

grid-column-end

的同一个元素上，一旦我把它拿出来，这解决了我的问题程度。对于你的情况，我建议首先完全去掉宽度；如果它有效，您可能需要找到另一种方法来应用

clamp(250px, 100%, 400px)

。希望这有帮助。

Answer 5

尝试使用网格列：* / *;不使用“grid-column-end”

Answer 6

确保您在元素上设置了

display: grid;

，我刚刚弄清楚我的问题来自哪里 规则是你必须首先在元素上设置一个显示网格，就像

el{
 display: grid;
 grid-column-end: span 4;
}