I can't get grid-template-areas to work in html

Question

I'm trying to use grid-areas to have a 30%/70% split in a box with an image on the left and text on the right, but they keep overlapping and I don't know how to fix it. Image isn't showing up in snippet but it should be on the left.

.gridcart {
  display: grid;
  width: 100%;
  /* height: 250px; */
  grid-template-areas: "cartimg carttext";
  /* grid-template-rows: 30% 70%; */
  /* grid-template-columns: 30% 70%; */
}

#cartimg {
  grid-area: cartimg;
  background-color: #82241F;
}

#carttext {
  grid-area: carttext;
}

#topbox {
  background-color: white;
  padding: 1em;
  margin-top: 1%;
  margin-bottom: 1%;
  border: 3px solid #82241F;
  display: grid;
  /* grid-template-rows: 500px 500px; */
  /*grid-template-areas: 
    "left right";*/
}

<div class="container">
  <h1>My Cart</h1>
  <div id="topbox" class="gridcart">
    <div class="" id="cartimg">
      <img src="images/glove.jpg" alt="" height="200px">
    </div>
    <div class="" id="carttext">
      <h2>Single Latex Glove</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium deleniti eos ducimus error, adipisci doloremque beatae? Optio, culpa harum! Accusantium modi aut sint numquam eius amet facilis rem quaerat consequuntur.</p>
    </div>
  </div>
</div>

Answer 1

If you set columns up like this…

grid-template-columns: 30% 70%;

…you will eventually have issues with overlapping at smaller screen dimensions, as the OP discovered.

I think what you actually want is for the second column to take up whatever space the first column did not fill. Using fr (or auto), you don't need to guess at layout proportions using hard-coded percentages.

grid-template-columns: max-content 1fr;

Demo:

#topbox {
  background-color: white;
  padding: 1em;
  margin-top: 1%;
  margin-bottom: 1%;
  border: 3px solid #82241F;
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-gap: 10px;
}
#cartimg {
  margin: auto;
}
img {
  height: 200px;
}

<div class="container">
  <h1>My Cart</h1>
  <div id="topbox" class="gridcart">
    <div class="" id="cartimg">
      <img src="data:image/webp;base64,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" alt="">
    </div>
    <div class="" id="carttext">
      <h2>Single Latex Glove</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium deleniti eos ducimus error, adipisci doloremque beatae? Optio, culpa harum! Accusantium modi aut sint numquam eius amet facilis rem quaerat consequuntur.</p>
    </div>
  </div>
</div>

Answer 2

I'm not sure why you say you need grid-template-areas. For what you are explaining, you may use just:

#topbox {
  display: grid;
  grid-template-columns: 30% 70%;
}

Here you can see a codepen I hope that helps!!