grid-template-areas 不会将所有列都占为一个 div

Question

我正在构建一个带有网格的页面。

我陷入了 grid-template-areas。

我希望 .cinema 包含所有 space（2 列）并且 .why 仅包含第一列。

但是当我写了两次 .cinema 时，Chrome 显示了 grid-template-areas - "invalid property value"

为什么会这样？

.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

您的代码中似乎有很多问题。

首先，form 个元素包含在 p 个元素中。这是无效的 HTML.

段落元素只能包含[=36=]短语内容。参见 this post and the spec。

其次，grid-template-areas 属性的字符串值必须具有相同的列数。在你的媒体查询中，第一行有两列，第二行有一列。

grid-template-areas: "cinema cinema" "why"

这是无效的CSS。规则被忽略。

试试这个：

grid-template-areas: "cinema cinema" "why ."

一个句点（.），或一系列连续的句点（...），可以用来表示一个空的网格区域，并在字符串之间保持相等的列。

详情请看这里：

grid-template-areas 不会将所有列都占为一个 div

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

html

css

css-grid