Chrome忽略CSS网格布局设置

Question

我有一个页面试图以div显示购物车中的所有商品。为简单起见，我将隐藏所有不相关的php代码，并仅显示与样式问题相关的行：

cart.php

<form action="singleproduct.php" method="post" class="cart">
<button type="submit" name="prod" value="<?php echo $tobuy['ProductID'] ?>" class="cartitem">
    <img src=<?php echo "http://$_SERVER[HTTP_HOST]/WebApplications/productImages/" . $tobuy['PictureLocation']?>></img>
    <p id="name"> <?php echo $tobuy['ProductName'] ?> </p>
    <p id="make"> <?php echo $tobuy['Make'] ?> </p>
    <p id="cost"> <i>Cost : $<?php echo $tobuy['Cost'] * $tobuy['quantity'] ?> </i> </p>
    <p id="quty"> Quantity : <?php echo $tobuy['quantity'] ?> </p>
</button>
</form>

<form action="cart.php" method="post" class="delete">
    <button
        type=submit
        name="delete"
        value=<?php echo $tobuy['ProductID'] ?>>
        Remove item </button>
    </button>
</form>

styles.css

form.cart > .cartitem{
    grid-column: 1/7;
    width: 100%;
    display: grid;
    grid-template-areas: "image name"
                         "image make"
                         "image cost"
                         "image quty";
    grid-template-columns: 200px auto;
    grid-column-gap: 20px;
    text-align: left;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 30px black;
    background: linear-gradient(#a7321f, #3d1111);
}

form.cart > .cartitem > img {
    grid-area: image;
    object-fit: cover;
    height: 200px;
    width: 200px;
    border-radius: 10px;
    box-shadow: 0 0 20px black;
}

form.cart > .cartitem > p#name{
    grid-area: name;
    font-size: 20px;
    font-weight: 300;
}

form.cart > .cartitem > p#make{
    grid-area: make;
    font-size: 25px;
    font-weight: 500;
}

form.cart > .cartitem > p#cost{
    grid-area: cost;
    font-size: 20px;
    font-weight: 300;
}

form.cart > .cartitem > p#quty{
    grid-area: quty;
    font-size: 15px;
}

据我所知，Chrome与CSS Grid完全兼容。我使用的是v65，而this website表示它应该有效。但是，这是它在Firefox中的样子：

以下是Chrome浏览器的外观：

网格应该是2列4行，如css和firefox所示，但是在Chrome浏览器中由于某种原因，只有6列网格，没有行。

有没有办法让我的网页在Chrome中与在Firefox中看起来一样？