Grid-Template-Bereiche nimmt nicht alle Spalten für ein Div

Question

Ich baue eine Seite mit Gitter.

Und ich bin in einem stecken mit grid-template-areas.

Ich möchte, dass .cinema braucht nur Platz (2 Spalte) und .why nur erste Spalte.

Aber wenn ich .cinema zweimal schrieb, zeigte Chrome den grid-template-areas - „ungültigen Eigenschaftswert“

Warum geschehen ist das?

.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

Es erscheinen zahlreiche Probleme in Ihrem Code zu sein.

Zuerst haben Sie form Elemente in Elemente enthalten. Dies ist ungültiger HTML-Code.

Ein Absatzelement kann nur Phrasierungsinhalt enthalten. Siehe this post und spec.

Zweitens müssen die Zeichenfolgenwerte der grid-template-areas-Eigenschaft die gleiche Anzahl von Spalten haben. In Ihrer Medienabfrage hat die erste Zeile zwei Spalten und die zweite Zeile hat eine Spalte.

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

Dies ist ungültiges CSS. Die Regel wird ignoriert.

Versuchen Sie stattdessen:

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

Eine Periode (.) oder eine Sequenz von aufeinanderfolgenden Perioden (...), kann verwendet werden, einen leeren Gitterfläche darstellen und gleiche Spalten zwischen strings aufrechtzuerhalten.

Sehen Sie hier für weitere Informationen:

• Grid areas not laying out properly in CSS Grid
• grid-template-areas with ASCII art is not working