放置在CSS网格区域之外的文本

Question

我不知道如何使文本停留在网格区域内，而不是扩展文本并将其放置在网格下方。

这就是我想要的样子：

.box1 {
  grid-area: box1;
  background-color: lightblue;
  text-align: center;
}

.toptekst {
  grid-area: box1;
  align-self: center;
  justify-self: center;
}

<grid-container class="grid">
  <div class="box1">
    <info class="toptekst">
      <h1>HEADLINE!</h1>
      <p class="subheadline">Subheadline here...</p>
      <p class="rubrik">Bodytext,lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. </p>
    </info>
  </div>
</grid-container>

Answer 1

当您为元素显示网格赋予该属性仅适用于所有直接子代时。该问题可以如下解决。

.grid{
 display:grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: auto;
 grid-template-areas:". heading ."
                      ". sub-heading ."
                      ". textt ."
 }
 h1{
 grid-area:heading;
 justify-self: center
 }
 .subheadline{
 grid-area:sub-heading;
 justify-self: center
 
 }
 .rubrik{
 grid-area:textt;
 justify-self: center;
 text-align:center;
 }
 

  
  <div class="grid">
   <h1>HEADLINE!</h1>
   <p class="subheadline">Subheadline here...</p>
   <p class="rubrik">Bodytext,lorem ipsum dolor sit   amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. </p>
  </div>