html - 显示 :grid 上的网格内容问题

Question

我第一次使用“显示:网格”时，无法将内容插入其中一个网格。

会发生什么？组装网格时，一切都非常漂亮并且是我需要的方式，但是当我在其中一个中插入文本时，它会拉长并失去整个布局。为什么会发生这种情况以及如何预防？

.agrupou-a-grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto;
  grid-template-rows: 50px 50px 50px 50px 50px;
  grid-template-areas: 
  'a a b' 
  'c d b' 
  'e f f' 
  'g g h' 
  'i j j';
}

.agrupou-a-grid .box {
  background: red;
}

<div class="agrupou-a-grid">
  <div class="box gd1">
    <div class="group-content">
      <h2>Coleção em destaque</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure.
      </p>
    </div>
  </div>
  <div class="box gd2"></div>
  <div class="box gd3"></div>
  <div class="box gd4"></div>
  <div class="box gd5"></div>
  <div class="box gd6"></div>
  <div class="box gd7"></div>
  <div class="box gd8"></div>
  <div class="box gd9"></div>
  <div class="box gd10"></div>
</div>

放置文字之前

放置文字后

Answer 1

好的，伙计们，解决方案是放置一个 grid-template-columns: 33% 33% 33%; 因为网格有 3 列。非常明显，我知道。