Anomalous css behavior?

Question

css

Started learning grid in css. encountered an incomprehensible situation - https://codepen.io/AkDF03/pen/gewWJY - when you hover over menu items (first, second, etc), the height of the rows in the table increases.
Shows up in mozilla. In chrome, there is no such behavior , the
behavior stops if:

• remove margin-top in table styles
  
• remove menu items :hover
  
• remove the .grid class from .container
  
• remove the grid class from .body
  

What am I doing wrong?