Question

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

我陷入grid-template-areas。

我希望.cinema仅占用所有空格（2列）和.why第一列。

但是当我写两次.cinema时，Chrome会显示grid-template-areas - “无效的属性值”

为什么会这样？

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

段落元素只能包含词组内容。请参阅this post和spec。

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

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

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

请改为尝试：

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

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

请点击此处了解更多详情：

grid-template-areas不会占用一个div的所有列

1 个答案: