Stop CSS Grid stretching when adding text?

I'm pretty green to html & css.

I've created a grid with 8 equal rows & 2 equal columns, and i'm trying to write a paragraph in the 5th to 8th row / 1st column, but each time i do it it stretches the column out and pushes into the right side one, making it smaller and smaller. The text only starts wrapping at about 95% of the whole zone (so the left column is nearly the whole page basically).

I've tried using overflow-wrap / word-break / word-wrap / min-width etc etc.. Looked up online and I still can't seem to get it to stay put !

Here's the whole code with some text that expands the column. Any help is appreciated thanks !

body {
  background-color: black;
}

.mainzone {
  background-color: white;
  width: 960px;
  display: grid;
  grid-template-areas: "bannerpic bannerpic"
                       "bannerpic bannerpic"
                       "title title"
                       "syn act"
                       "rev names"
                       "rev avs"
                       "rev crit"
                       "rev stars";
  grid-template-rows: repeat(8, 1fr);
  grid-template-colums: repeat(2, 1fr);
  margin: auto;
  margin-top: 100px;
  margin-bottom: 100px;
  border-radius: 20px;
}

.bannerpic {
  grid-area: bannerpic;
  /* border: 1px black solid; */
  border-radius: 20px 20px 0px 0px;
  background-image: url("./IMG/banner.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 250px;
  width: 960px;
  margin: auto;
}

.maintitle {
  grid-area: title;
  border: 1px black solid;
}

.logo-new {
  grid-area: title;
  background-image: url("./IMG/logo1black.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 100px;
  width: auto;
  margin: 10px 10px 0px 0px;
  background-position: right;
}

.subsyn {
  grid-area: syn;
  border: 1px black solid;
}

.subact {
  grid-area: act;
  border: 1px black solid;
}

.subavs {
  grid-area: avs;
  border: 1px black solid;

}

.review {
  grid-area: rev;
  border: 1px black solid;
}
.para {
  
}

.actors {
  grid-area: names;
  border: 1px black solid;
}

.critique {
  grid-area: crit;
  border: 1px black solid;
}

.stars {
  grid-area: stars;
  border: 1px black solid;
  background-image: url(./IMG/stars1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./style.css">
  <title></title>
</head>

<body>
  <div class="mainzone">
    <div class="bannerpic"></div>
    <div class="maintitle"></div>
    <div class="logo-new"></div>
    <div class="logo-old"></div>
    <div class="subsyn"></div>
    <div class="subact"></div>
    <div class="subavs"></div>
    <div class="review">
      <p class="para">this is the paragraph stretching it, i'll add some random characters. dsds sdsds dsd sd sd sdsd sd sd sds  dsd sd sdsdsd  sdsds ds dsd sd sd sd sd s<p>
    </div>
    <div class="actors"></div>
    <div class="critique"></div>
    <div class="stars"></div>

  </div>  <!-- mainzone -->

</body>
</html>

Solution

Your problem is just a typo: grid-template-colums should be grid-template-columns

Some hints to help in future:

A spellchecker in your editor can pick up a few bugs straight away; a big help for string reliant code like CSS.
VS Code would have warned you about the unknown property.
Firefox, if you click on the CSS icon in devtools would have shown you the error:

body {
  background-color: black;
}

.mainzone {
  background-color: white;
  width: 960px;
  display: grid;
  grid-template-areas: "bannerpic bannerpic"
                       "bannerpic bannerpic"
                       "title title"
                       "syn act"
                       "rev names"
                       "rev avs"
                       "rev crit"
                       "rev stars";
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(2, 1fr);
  margin: auto;
  margin-top: 100px;
  margin-bottom: 100px;
  border-radius: 20px;
}

.bannerpic {
  grid-area: bannerpic;
  /* border: 1px black solid; */
  border-radius: 20px 20px 0px 0px;
  background-image: url("./IMG/banner.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 250px;
  width: 960px;
  margin: auto;
}

.maintitle {
  grid-area: title;
  border: 1px black solid;
}

.logo-new {
  grid-area: title;
  background-image: url("./IMG/logo1black.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 100px;
  width: auto;
  margin: 10px 10px 0px 0px;
  background-position: right;
}

.subsyn {
  grid-area: syn;
  border: 1px black solid;
}

.subact {
  grid-area: act;
  border: 1px black solid;
}

.subavs {
  grid-area: avs;
  border: 1px black solid;

}

.review {
  grid-area: rev;
  border: 1px black solid;
}
.para {
  
}

.actors {
  grid-area: names;
  border: 1px black solid;
}

.critique {
  grid-area: crit;
  border: 1px black solid;
}

.stars {
  grid-area: stars;
  border: 1px black solid;
  background-image: url(./IMG/stars1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./style.css">
  <title></title>
</head>

<body>
  <div class="mainzone">
    <div class="bannerpic"></div>
    <div class="maintitle"></div>
    <div class="logo-new"></div>
    <div class="logo-old"></div>
    <div class="subsyn"></div>
    <div class="subact"></div>
    <div class="subavs"></div>
    <div class="review">
      <p class="para">this is the paragraph stretching it, i'll add some random characters. dsds sdsds dsd sd sd sdsd sd sd sds  dsd sd sdsdsd  sdsds ds dsd sd sd sd sd s<p>
    </div>
    <div class="actors"></div>
    <div class="critique"></div>
    <div class="stars"></div>

  </div>  <!-- mainzone -->

</body>
</html>