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>
答
似乎有在代码中的许多问题。
首先,您有form
元素包含在p
元素内。这是无效的HTML。
其次,grid-template-areas
属性的字符串值必须具有相同的列数。在媒体查询中,第一行有两列,第二行有一列。
grid-template-areas: "cinema cinema" "why"
这是无效的CSS。该规则被忽略。
尝试此代替:
grid-template-areas: "cinema cinema" "why ."
的期间(.
),或连续时段(...
)的序列,可以被用于表示一个空的网格区域,并保持串之间相等的列。
在这里看到更多的细节:
谢谢你,Michael_B。我没有放点。这是一个问题。这是我与电网的第一步,我还不知道所有的规则。你帮我! – Natalia