使网格项中的内容等于CSS中的高度网格

Question

我想弄清楚如何让我的网格的两列高度相同。这是我所追求的：

 
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 
 

这是其中x代表的网格（显示：网格）的边界和Q的是标签和输入框。 以下是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; 
} 

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

我似乎无法得到左栏拉伸到正确的山坳的高度的高度（其我想也是行高我希望CSS网格能够做到这一点，但很难找到这个确切的问题

我也尝试设置高度为100％但是它并没有考虑到电网差距，并且走得太远了。

如何让左侧为行高？

Answer 1

这些网格项目已经在相同的高度。它们都是第二行的高度，即网格容器上的grid-template-rows定义的1fr。

如果你在这两个项目之间放置边框（.companyInfoContainer & .contactInfoContainer），你会明白我的意思。

revised demo

它似乎想要将网格项目（.companyInfoBox和.contactInfoBox）的接壤孩子消耗所有可用的高度。

由于网格物品不是网格容器，因此you can't use grid properties on the children。

一个简单高效的解决方案将使网格项目柔性容器。然后，您可以将柔性属性应用于子项，这可以使它们消耗可用空间。

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

.companyInfoBox { 
    flex: 1; 
} 

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

.contactInfoBox { 
    flex: 1 
} 

revised demo

更多细节：Descendant element not responding to grid properties

Answer 2

使用display与项目height属性flexauto

例如

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

}

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

}

Answer 3

您可以手动设置相同的大小，如果电网不改变（你不要inser动态T最新的元素或更改现有的垂直尺寸）

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

它的简单和工程（考虑到上面列出的帐户限制）： pen