Начал изучать grid в css. столкнулся с непонятной ситуацией https://codepen.io/AkDF03/pen/gewWJY
<html>
<head>
<style>
.grid {display: grid;}
.menu {grid-template-columns: repeat(4, 1fr);}
.menu .item span:hover {border-bottom: 2px solid #f26c4f;}
.item a:hover { border-bottom: 2px solid #f26c4f;}
.data {margin-top: 10px;}
.body {grid-template-columns: 1fr 2fr;}
.grid-item {margin-top:20px;}
tr td {border: 1px solid #000;}
</style>
</head>
<body>
<section id="body">
<div class="container grid">
<div class="menu grid">
<div class="item"><a href="#">first</a></div>
<div class="item"><span>second</span></div>
<div class="item"><span>third</span></div>
<div class="item"><span>forth</span></div>
</div>
<div class="body grid">
<div class="grid-item">
test item grid
</div>
<table class="data grid-item">
<tr>
<td>row</td> <td>item</td>
</tr>
<tr>
<td>row</td> <td>item</td>
</tr>
</table>
</div>
</div>
</section>
</body>
<html>
при наведении на пункты меню (first, second, etc) увеличивается высота строчек в таблице. Проявляется в мозилле. В хроме такого поведения нет.
Поведение прекращается если:
в стилях таблицы убрать margin-top
убрать у пунктов меню :hover
у .container убрать класс .grid
у .body убрать класс grid
Это баг в моем коде? или это что-то с самим CSS Grid?