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

我正在使用网格构建一个页面。grid-template-areas不占用一个div的所有列

而我陷入了grid-template-areas。

我想这.cinema通吃空间（2列）和.why只有第一列。

但是，当我写.cinema两次，浏览器显示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>

来源

2017-09-04 Natalia

似乎有在代码中的许多问题。

首先，您有form元素包含在p元素内。这是无效的HTML。

段落元素只能包含短语内容。见this post和spec。

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

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

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

尝试此代替：

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

的期间（.），或连续时段（...）的序列，可以被用于表示一个空的网格区域，并保持串之间相等的列。

在这里看到更多的细节：

来源

2017-09-04 15:04:39

谢谢你，Michael_B。我没有放点。这是一个问题。这是我与电网的第一步，我还不知道所有的规则。你帮我！ – Natalia

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

回答

相关问题