text placed outside of css grid area

Question

I can't figure out how to get my text to stay inside the grid area, instead of expanding it and place itself underneath..

This is how I would like it to look:

.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

when you give element display grid that property applied to All the direct children only. the problem can be solved as follows.

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