问题描述
我试图弄清楚如何使网格的两列具有相同的高度。这就是我的追求:
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:
我似乎无法将左列一直延伸到右侧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中使网格项内的内容等于高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!