Den Inhalt innerhalb der Gitterelemente in CSS Grid gleich groß machen

Question

Ich versuche herauszufinden, wie zwei Spalten meines Gitters die gleiche Höhe erhalten. Hier ist, was ich bin nach:

 
xxxxxxxxxxxxxxxxx   xxxxxxxxxxxxxxxxxxx 
 
x qqqqqqqqqqqqq x   x qqqqqqqqqqqqqqq x 
 
x qqqqqqqqqqqqq x   x qqqqqqqqqqqqqqq x 
 
x    x   x qqqqqqqqqqqqqqq x 
 
x    x   x qqqqqqqqqqqqqqq x 
 
xxxxxxxxxxxxxxxxx   xxxxxxxxxxxxxxxxxxx 
 

Dies ist, wo die x eine Grenze eines Gitters dar (Anzeige: Gitter) und der Q sind Labels und Eingabefelder. Hier ist der ganze Code und eine Verbindung zu demselben auf Codepen.

.container { 
    font-family: Arial, Helvetica, Sans-Serif; 
    color: #666; 
    font-size: 12px; 
    position: absolute; 
    width: 100%; 
    margin: 0 auto; 
    border: 1px solid #666; 
    background-color: #fff; 
    height: 100%; 
} 

.outerGrid { 
    display: grid; 
    grid-template-columns: 1fr 2fr 3fr 1fr; 
    grid-template-rows: 80px 1fr 1fr 30px; 
    grid-gap: 20px; 
    grid-template-areas: 
    "title title title title" 
    ". companyInfo contactInfo . " 
    ". demoInfo demoInfo . " 
    "footer footer footer footer"; 
} 

.companyInfoContainer { 
    grid-area: companyInfo; 
} 

.companyInfoBox { 
    padding: 20px; 
    border: 1px solid #666; 
} 

.contactInfoContainer { 
    grid-area: contactInfo; 
} 

.contactInfoBox { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: auto; 
    grid-gap: 20px; 
    grid-template-areas: 'contactLeft contactRight'; 
    border: 1px solid #666; 
    padding: 20px; 
} 

.titleRow { 
    display: flex; 
    -webkit-box-pack: justify; 
    justify-content: space-between; 
    align-content: flex-start; 
    margin-bottom: 10px; 
    color: #333; 
    font-size: 16px; 
} 

.formControl { 
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; 
    display: block; 
    height: 37px; 
    padding: 5px; 
    line-height: 1.25; 
    background-color: #fff; 
    width: 100%; 
    background-clip: padding-box; 
    border: 1px solid rgba(0,0,0,.15); 
    border-radius: .25rem; 
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; 
    margin-bottom: 5px; 
    background-image: none; 
} 

.formTitleTop { 
    margin-bottom: 10px; 
} 

.formTitle { 
    margin: 10px 0; 
} 

... und die html:

<div class='container'> 
    <div class="outerGrid"> 
    <div class="companyInfoContainer"> 
     <div class="titleRow"> 
     <div>Company Information</div> 
     <div>* Required</div> 
     </div> 
     <div class="companyInfoBox"> 
     <div class="formTitleTop">Company Name*</div><input type="text" class="formControl" value=""> 
     <div class="formTitle">Website (leave blank if not website)</div> 
     <input type="text" class="formControl" value=""></div> 
    </div> 
    <div class="contactInfoContainer"> 
     <div class="titleRow"> 
     <div>Contact Information</div> 
     <div class="required">* Required</div> 
     </div> 
     <div class="contactInfoBox"> 
     <div class="contactLeft"> 
      <div class="formTitleTop">First Name*</div><input type="text" class="formControl" value=""> 
      <div class="formTitle">Last Name*</div><input type="text" class="formControl" value=""> 
      <div class="formTitle">Role*</div><input type="text" class="formControl" value=""><input type="button" value="Add Additional Contacts"></div> 
     <div class="contactRight"> 
      <div class="formTitleTop">Phone Number*</div><input type="text" class="formControl" value=""> 
      <div class="formTitle">Mobile Phone Number</div><input type="text" class="formControl" value=""> 
      <div class="formTitle">Email Address*</div><input type="text" class="formControl" value=""></div> 
     </div> 
    </div> 
    </div> 
</div> 

codepen: https://codepen.io/GuitarJ/pen/QqZRYR

Ich kann nicht scheinen, die linke Spalte zu bekommen, um die Höhe des rechten Spalte in der Höhe zu strecken (die Ich denke, dass die Zeilenhöhe auch ist. Ich hatte gehofft, dass CSS-Gitter einen Weg dazu haben würden, aber es ist schwer, nach genau diesem Problem zu suchen.

Ich habe auch versucht, die Höhe auf 100% zu setzen, Aber dann hat es die Netzlücke nicht eingehalten und ist zu weit gegangen.

Wie kann ich die linke Seite die Zeilenhöhe machen?

Answer 1

Diese Rasterelemente sind bereits die gleiche Höhe. Sie sind beide die Höhe der zweiten Reihe, die 1fr ist, wie durch grid-template-rows auf dem Gitterbehälter definiert.

Wenn Sie einen Rahmen um diese beiden Elemente (.companyInfoContainer & .contactInfoContainer) legen, werden Sie sehen, was ich meine.

revised demo

Es scheint, dass Sie die grenzte Kinder der Rasterelemente (.companyInfoBox und .contactInfoBox) alle verfügbaren Höhe konsumieren wollen.

Da die Gitterelemente nicht auch Gitterboxen sind, you can't use grid properties on the children.

Eine einfache und effiziente Lösung wäre, die Grid-Artikel Flex-Container zu machen. Dann können Sie den Kindern Flex-Eigenschaften zuweisen, wodurch sie freien Speicherplatz verbrauchen können.

.companyInfoContainer { 
    display: flex; 
    flex-direction: column; 
} 

.companyInfoBox { 
    flex: 1; 
} 

.contactInfoContainer { 
    display: flex; 
    flex-direction: column; 
} 

.contactInfoBox { 
    flex: 1 
} 

revised demo

Weitere Details: Descendant element not responding to grid properties

Answer 2

Verwendung display Eigenschaft flex mit Artikel Höhe auto

zum Beispiel

.flex-container { 
display: flex; 
width: 400px; 
height: auto; 

}

.flex-item { 
background: red; 
width: 100px; 
height: auto; 
margin: 10px; 

}

Answer 3

Sie manuell die gleiche Größe eingestellt werden, wenn Gitter nicht der Fall ist ändern (Sie nicht eingeben t dynamisch neue Elemente oder ändern bestehende vertikale Größe)

.companyInfoBox { 
    padding: 20px; 
    border: 1px solid #666; 
    height: 265px; 
} 

Es ist einfach und funktioniert (unter Konten oben genannten Einschränkungen): pen