grid-template-areas doesn't take all columns for one div - html

Question

I am building a page with grid.
And I am in a stuck with grid-template-areas.
I want that .cinema takes all space (2 column) and .why only first column.
But when I wrote .cinema twice, Chrome showed the grid-template-areas - "invalid property value"
Why does it happen?
.grid {
display: grid;
grid-gap: 0px;
grid-template-areas: "cinema" "why"
}
#media (min-width: 640px) {
.grid {
grid-template-columns: 1fr 1fr;
grid-template-areas: "cinema cinema" "why"
}
}
.cinema {
grid-area: cinema;
background: url(comigo/other/homepage-featured-new-1920x745.jpg) no repeat;
background-position: 100%;
background-size: cover;
text-align: center;
}
.why {
grid-area: why;
background: white;
text-align: center;
}
<div class="grid">
<div class="cinema">
<h3>Comigo OTT/STB solutions - redefine TV experience</h3>
<p>
<form>
<button>OUR SOLUTIONS</button>
</form>
</div>
<div class="why">
<h2> WHY COMIGO?</h2>
<h4>Comigo redefines the TV experience
<p>
<form>
<button>CONTACT US</button>
</form>
</div>
</div>

Answer 1

There appear to be numerous problems in your code.
First, you have form elements contained inside p elements. This is invalid HTML.
A paragraph element can contain only phrasing content. See this post and the spec.
Second, the string values of the grid-template-areas property must have the same number of columns. In your media query, the first row has two columns, and the second row has one column.
grid-template-areas: "cinema cinema" "why"
This is invalid CSS. The rule is ignored.
Try this instead:
grid-template-areas: "cinema cinema" "why ."
A period (.), or a sequence of contiguous periods (...), can be used to represent an empty grid area and maintain equal columns among strings.
See here for more details:
Grid areas not laying out properly in CSS Grid
grid-template-areas with ASCII art is not working