Is a button allowed to have display:grid?

Question

Is a button allowed to have display:grid, or, more generally, are there any elements that can't be styled with display:grid?

Consider:

button,
div {
  display: grid;
  grid-template-columns: 50px 50px;
}


/* Nevermind these, they're just for a consistent display */

button,
div {
  border: 0;
  background-color: gray;
  color: black;
  width: 100px;
  text-align: center;
  font-family: sans-serif;
  font-size: 14px;
  padding: 0;
}

Button:
<button>
  <span>A</span>
  <span>B</span>
</button>
<br> 
Div:
<div>
  <span>A</span>
  <span>B</span>
</div>

Try it on JsFiddle

This is the result in Firefox (61.0.1):

And this is the result in Chrome (68.0.3440.106):

Chrome seems to dislike that I'm trying to use display:grid on a button. Is this just a bug? Or is it intended somehow?

This is a good question :) Obvious workaround is to wrap all the elements in the button with `div` but you probably already knew it. — Mosh Feu, Aug 13 '18 at 05:12
what happen if you put `button span {padding: 0;margin: 0;}` ? — , Aug 13 '18 at 05:29
are you using some reset css? I mean some css code to errase all defaults in browsers? I believe this is caused by some inconsistency bewteen the two browsers defaults. — , Aug 13 '18 at 06:02
@MoshFeu Thanks! Yeah, that's what I'm doing. I'm just trying to keep my html as lean as possible and a superfluous div is very annoying :D — Not a real meerkat, Aug 13 '18 at 06:18
@Dknacht None of chrome's default styles has any influence in this. I didn't check on Firefox, but I don't really need to, since it has the intended behavior already. — Not a real meerkat, Aug 13 '18 at 06:25
I found another [question](https://stackoverflow.com/a/48446849/863110) about different behaviour in Chrome and Firefox regards to `grid`. Maybe it's bug on Chrome. Furthermore, in devtools `grid` children have dash border when hover on it (https://i.stack.imgur.com/aS1h3.png). In this case there is no border (https://i.stack.imgur.com/PBKmy.png). — Mosh Feu, Aug 13 '18 at 06:45

score 31 · Accepted Answer · answered Aug 13 '18 at 06:50

31

Apparently it's a bug on Chrome which detailed here:

https://github.com/rachelandrew/gridbugs#10-some-html-elements-cant-be-grid-containers

And tracked here:

https://bugs.chromium.org/p/chromium/issues/detail?id=375693

_{(I don't see a progress here. If it fixed, please edit the answer or I will if I remember)}

answered Aug 13 '18 at 06:50

Mosh Feu

28,354
16
88
135

1

After almost 2 years, this is finally fixed: https://chromium.googlesource.com/chromium/src.git/+/aa61e4be3e5b2d6fbf42962382b46939e18fddc4 (There's also a comment about it in the bug tracker) – Not a real meerkat May 22 '20 at 18:17
Actually, the issue in the bug tracker is much older than this question, so it's been actually almost 6 years! :D – Not a real meerkat May 22 '20 at 18:22

Is a button allowed to have display:grid?

1 Answers1

Linked

Related