我无法在HTML中使用网格模板区域

Question

我正在尝试使用网格区域在一个具有30％/ 70％的框的情况下拆分，左侧的图像和右侧的文本，但是它们一直重叠，我不知道如何解决它。图片未显示在摘要中，但应该在左侧。

.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

我不确定为什么您说需要网格模板区域。 对于您正在解释的内容，您可以仅使用：

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

在这里您可以看到codepen 希望对您有帮助！

Answer 2

如果您这样设置列…

grid-template-columns: 30% 70%;

...正如OP所发现的，最终您将遇到在较小的屏幕尺寸上重叠的问题。

我认为您真正想要的是第二列占用第一列未填充的任何空间。使用fr（或auto），您无需使用硬编码百分比来猜测布局比例。

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

演示：

#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>