Chrome игнорирует настройки макета CSS Grid

У меня есть страница, которая пытается отобразить все товары в корзине в 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, а этот сайт говорит, что должно работать. Однако вот как это выглядит в Firefox:

А вот как это выглядит в Chrome:

Сетка должна состоять из 2 столбцов на 4 строки, как показано в css и firefox, однако в Chrome по какой-то причине есть сетка только из 6 столбцов без строк.

Есть ли способ сделать так, чтобы веб-страница в Chrome выглядела так же, как в Firefox?