текст размещен вне области сетки 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>