css - 放置在 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>