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

Question

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:

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?

Roam

This is happening to me right now and it's frustrating the hell out of me! – Ochoa

Looks like a Chrome bug, given that it clearly does have an effect. – Cloe

Answer 1

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  

Worsted

Answer 2

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.

Mcclean

Answer 3

For that selector that could take more than 1 column, you should try setting one of the following options:

• inline-block
• inline-flex
• inline-grid
• inline-table

That worked for me.

Ilke

Strange, it did not for me. What is really odd is that when I mouse over the tooltip, it still says I should pick a display type other than block, even though the line above it literally reads "display: inline-block". – Roam

The question was: why? I for one would really like to know why! – Olaolaf

It did not work for me. – Plasmagel

Answer 4

Make sure the selector is a direct descendant of the grid. This was casuing the issue for me.

Asepsis

This is a valid point, but was not the issue in this case. – Roam

Answer 5

I came across the same issue and I just figured what was causing mine was the width, it was on the same element I wanted to apply the grid-column-end to, and once I took it out, that solved my problem to some degree. In your case, I would suggest first taking out the width entirely; if it works, you might have to find another way to apply the clamp(250px, 100%, 400px). hope this helps.

Espouse

Answer 6

try using grid-column: * / *; without using "grid-column-end"

Mosher

Unfortunately this does not solve my problem, since I'm trying to create a rule for a field that should be four grid columns wide, but might have different starting grid points. – Roam

.boxes { grid-template-columns: repeat(4, 1fr); { .grid-start { grid-column: 2 / 4; } } – Mosher

Did not work for me – Plasmagel

Answer 7

make sure you have display: grid; set on the element, i have just figured out where my issue comes from rule is you must set a display grid on the element first just like

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

Seaboard