代码之家 › 专栏 › 技术社区 › Jeff

使网格项目内的内容在CSS网格中高度相等

css-grid grid-layout css html

Jeff · 技术社区 · 7 年前

我正试图找出如何使网格中的两列具有相同的高度。以下是我想要的:

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>

代码笔: https://codepen.io/GuitarJ/pen/QqZRYR

我似乎无法让左列延伸到右列的高度(我认为这也是行的高度)。我希望css网格能够做到这一点,但很难找到这个确切的问题。

我也试着将高度设置为100%,但它没有考虑网格间隙,并且下降得太远。

如何使左侧成为行高?

3 回复 | 直到 7 年前

Michael Benjamin William Falcon 7 年前

这些网格项的高度已经相同。它们都是第二排的高度,也就是 1fr ,定义如下: grid-template-rows 在网格容器上。

如果你在这两个项目周围加上一个边界( .companyInfoContainer & .contactInfoContainer ),你会明白我的意思。

revised demo

似乎需要网格项的带边框的子项( .companyInfoBox .contactInfoBox )消耗所有可用高度。

由于网格项也不是网格容器, you can't use grid properties on the children .

一 简单高效的解决方案 将使网格项具有弹性容器。然后,您可以将flex属性应用于子对象,这可以使它们占用可用空间。

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

.companyInfoBox {
   flex: 1;
 }

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

.contactInfoBox {
   flex: 1
}

revised demo

Darkpiece 7 年前

使用 display 所有物 flex 具有项目高度 auto

例如

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

}

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

CodeSmith 7 年前

如果网格不变,可以手动设置相同的大小(不动态插入新元素或更改现有元素的垂直大小)

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

它简单有效(考虑到上面列出的限制): pen