Chrome issues with CSS Grid styled buttons

Question

I've been struggling to make CSS Grid work on buttons on Chromium. It works fine with Firefox but on Chromium there's something wrong going on. The grid is displayed as if there was no second column defined.

Here's the basic code:

<button className="container">
   <div className="header"></div>
   <div className="child"></div>
   <div className="child"></div>
   <div className="child"></div>
   <div className="child"></div>
</button>

and here's the basic CSS code:

.container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 2.5rem repeat(3, 1fr);
   gap: 0.5rem;
}

.header {
   grid-row: 1 / 1;
   grid-column: 1 / -1;
}

Applying this code to the button gives the following result:

Grid layout with button element

It doesn't behave as intended. Changing the tag from 'button' to 'div' makes it work properly on Chrome:

Grid layout with div element

Of course I set outline to 0 and all that stuff. Firefox seems to display both properly.

As using div with onClick property isn't a good solution what can I do to fix this?

score 1 · Accepted Answer · answered Apr 17 '20 at 11:40

1

How about this?

<button>
   <div className="container">
       <div className="header"></div>
       <div className="child"></div>
       <div className="child"></div>
       <div className="child"></div>
       <div className="child"></div>
   </div>
</button>

answered Apr 17 '20 at 11:40

Wout Vandenwyngaert

46
4

Yeah, it works, thanks for the solution, but doesn't it all seem like an odd behavior? – Wojciech Mista Apr 17 '20 at 11:44
I've seen similair posts like yours where these grid buttons work fine on Firefox but not on Chrome. Some say it's a bug. – Wout Vandenwyngaert Apr 17 '20 at 11:50

Chrome issues with CSS Grid styled buttons

1 Answers1