在CSS Grid中使网格项内的内容等于高度 [英] Making the content inside grid items equal height in CSS Grid

问题描述

我试图弄清楚如何使网格的两列具有相同的高度。这就是我的追求：

I am trying to figure out how to get two columns of my grid the same height. Here is what I am after:

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上的所有代码和相同代码的链接。

This is where the x's represent a border of a grid (display: grid) and the q's are labels and input fields. Here is all the code and a link to the same on 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

我似乎无法将左列一直延伸到右侧col的高度（我想也是行高。我希望CSS网格能够做到这一点，但是很难找到这个确切的问题。

I can't seem to get the left column to stretch to the height of the right col's height (which I think is the row height too. I was hoping that css grids would have a way to do this, but its hard to search for this exact issue.

我也尝试将高度设置为100％，但随后它没有遵守网格间距并下降得太远。

I also tried setting the height to 100%, but then it didn't respect the grid-gap and went down too far.

如何使左侧成为行高？

推荐答案

这些网格项目已经具有相同的高度。第二行的高度，即 1fr ，由网格容器上的 grid-template-rows 定义。

Those grid items are already the same height. They are both the height of the second row, which is 1fr, as defined by grid-template-rows on the grid container.

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

If you put a border around those two items (.companyInfoContainer & .contactInfoContainer), you'll see what I mean.

修改后的演示

它似乎您希望网格项目的边框子级（ .companyInfoBox 和 .contactInfoBox ）占用所有可用高度。

It seems that you want the bordered children of the grid items (.companyInfoBox and .contactInfoBox) to consume all available height.

由于网格项目也不是网格容器，因此您不能使用子项上的网格属性。

Since the grid items are not also grid containers, you can't use grid properties on the children.

一种简单而有效的解决方案是使网格项可以灵活放置容器。然后，您可以将flex属性应用于子级，从而使它们消耗可用空间。

An easy and efficient solution would be to make the grid items flex containers. Then you can apply flex properties to the children, which can make them consume free space.

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

.companyInfoBox {
   flex: 1;
 }

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

.contactInfoBox {
   flex: 1
}

修改后的演示

更多详细信息：后代元素不响应网格属性

这篇关于在CSS Grid中使网格项内的内容等于高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！