React CSS grid, can't get a column to span full height

[jaunty basin]

Hi!

I'm trying to make a shopping cart display that displays at the right and takes up some room there.
-First picture describes how the main page looks like without shopping cart open.
-Second one is supposed to be page with shopping cart open.
Problem: I'm trying to make second picture's shopping cart section expand vertically from top to bottom, but after trying countless hours I'm still unable to do it. What makes it even more confusing is that usually in these kinds of scenarios setting height: 100% solves it.

This is the jsx I have on this page:

// main page
<main>
      <Navbar showCart={showCart} />

      // main content starting
      <div className={`centre ${cart ? styles.two : styles.one}`}>
         // this should be centered in the middle of it's column, which spans from top to bottom
        <div className="info">
          <h1>High quality table lamps</h1>
          <button>Learn more</button>
        </div>
        // this is the condational checkout page, when clicked makes the main content 2 column grid
        // trying to get this component to span from top to bottom
        {cart ? <Checkout /> : null}
      </div>
    // main content ending
</main>

Checkout component jsx:

<div className="cart">
            <h2>Your cart:</h2>
            <table>
                <thead>
                    <tr>
                        <th colSpan={2}>Product</th>
                        
                        <th>Price</th>
                        <th>Quantity</th>
                    </tr>
                </thead>

                <tbody>
                    {orders.map((order) => {
                        return (
                            <tr key={order.id}>
                                <td><img src={productIcons[order.id]} height="90" alt="" /></td>
                                <td>{order.name}</td>
                                <td>{order.price}€</td>
                                <td>{order.quantity}</td>
                                <td>
                                    <button onClick={() => handleOrderChange(order.id, 0)}>-</button>
                                    <button onClick={() => handleOrderChange(order.id, 1)}>+</button>
                                    <button onClick={() => removeFromOrder(order.id)}>trash</button>
                                </td>
                                
                            </tr>
                            
                    )})}
                </tbody>

            </table>
            
            <button disabled={totalSum>0? false: true}> <a target="_blank" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley">Continue {totalSum}€</a></button>

</div>

Now the CSS associated with all the placement:

Landingpage.css
.centre, .info, .cart {
    justify-items: center;
    align-content: center;
}

main {
    display: grid;
    grid-template-rows: 0.2fr 2fr;
    height: calc(100vh - 30px); /* Right now setting this height centers it to the middle of the page, but it doesn't fill up the remaining room */
}

Landingpage.module.css
//css for the 2 and 1 column layouts
.two {
    display: grid;
    grid-template-columns: 1fr 0.5fr;
    align-content: center;
}

.one {
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
}

I'ld be really thankful if anyone could help me with it, it's really annoying.

Codesandbox with simplified problem: https://codesandbox.io/s/broken-sun-hxpfng?from-embed

[acoustic owl]

I use web inspect on your codesandbox and added height: 100vh; to div.cart and it worked for me

No ofc, your going to want to modify the 100vh since that will take up the entire height of the page, if I found myself in that case I like to use calc(100vh - 'any space the header is taking up');

Landingpage.css:

ˆhtml {
  height: 100%;
  height: 100%;
}
.centre,
.info,
.cart {
  justify-items: center;
  align-content: center;
}

.info {
    height: 100px;
    margin-top: 50%;
    margin-bottom: 50%;
}

main {
  display: grid;
  grid-template-rows: 0.2fr 2fr;
  height: calc(
    100vh - 30px
  ); /* Right now setting this height centers it to the middle of the page, but it doesn't fill up the remaining room */
}

Dialog.css:

.cart {
  height: calc(100vh - 30px);
  background-color: antiquewhite;
  align-content: center;
}

.cart::backdrop {
  background-color: gray;
}