Почему это не работает?
.grid {
display: grid;
grid-auto-flow: row;
grid-auto-rows: 1fr;
grid-gap: 3px;
grid-template-columns: 3fr 1fr;
}
.grid .box {
display: contents;
}
.grid .item {
background-color: gold;
}
code {
background: rgba(0,0,0,0.1);
display: inline-block;
padding: 2px 5px;
}
<h4>This <code><table></code> doesn't behave correctly (Chrome and Firefox support <code>display: contents</code>)</h4>
<table class="grid">
<tr class="box">
<td class="item">A</td>
<td class="item">B</td>
</tr>
<tr class="box">
<td class="one item">A</td>
<td class="two item">B</td>
</tr>
</table>
<h4>This is how it should look like (no <code><table></code>)</h4>
<div class="grid">
<div class="box">
<div class="item">A</div>
<div class="item">B</div>
</div>
<div class="box">
<div class="item">A</div>
<div class="item">B</div>
</div>
</div>