Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does Chrome devtools complain that I should not use grid-column-end on an element with display: block?

I'm working with some css-grid formatted content. I have a rule like the one below, applied to an element within the grid:

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

When I do this, what I see in Chrome devtools (Chrome 108) is the following:

screen clip of devtools showing disabled css rule

Mousing over the "circle-i" gives the following message: "The display: block property prevents grid-column-end from having an effect. Try setting display to something other than block."

I do not understand this message, and I have not been able to find any documentation that would explain it. I can't see what other display type would be appropriate in this context. Is this a thing, or a Chrome bug?

like image 374
Denise Draper Avatar asked Aug 31 '25 15:08

Denise Draper


2 Answers

While I'm not certain whether this is a Chrome bug or not it's worth noting that the examples of using grid-column-end on MDN don't include any information about ensuring that the display property isn't set to block even though they're using <div>s in their example. You can see the sample code here: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end#examples  

like image 193
flyingace Avatar answered Sep 07 '25 10:09

flyingace


Looks like a Chrome bug. I can replicate the issue in Chrome, but not in Firefox, with the latter being a more reputable source of styling hints for me.

like image 30
yagger Avatar answered Sep 07 '25 10:09

yagger