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

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