Chrome ignoring CSS Grid layout settings

Question

I have a page which attempts to display all the items in the cart in divs. For simplicity's sake, I'll hide all the non-relevant php code and only show the lines relating to the styling problem:

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;
}

From what I could tell, Chrome has full compatability with CSS Grid. I am using v65, and this website says that it should work. However, here is how it looks in Firefox:

And here is how it looks in Chrome:

The grid should be 2 columns by 4 rows, as shown in the css and firefox, however in Chrome for some reason there's only a 6 column grid, with no rows.

Is there a way where I can make the webpage look the same in Chrome as it does in Firefox?