在 CSS 网格中使网格项目内的内容等于高度
Making the content inside grid items equal height in CSS Grid
我想弄清楚如何让我的网格的两列具有相同的高度。这就是我所追求的:
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 上相同的 link。
.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%,但后来它不考虑网格间隙并且下降得太远了。
如何让左边成为行高?
使用 display
属性 flex
和项目高度 auto
例如
.flex-container {
display: flex;
width: 400px;
height: auto;
}
.flex-item {
background: red;
width: 100px;
height: auto;
margin: 10px;
}
如果网格不变,您可以手动设置相同的大小(您不会动态插入新元素或更改现有元素的垂直大小)
.companyInfoBox {
padding: 20px;
border: 1px solid #666;
height: 265px;
}
它简单有效(考虑到上面列出的限制):
pen
那些网格项目已经是相同的高度。它们都是第二行的高度,即 1fr
,由网格容器上的 grid-template-rows
定义。
如果您在这两项 (.companyInfoContainer
& .contactInfoContainer
) 周围加上边框,您就会明白我的意思了。
您似乎希望网格项(.companyInfoBox
和 .contactInfoBox
)的边框 children 占据所有可用高度。
由于网格项不是网格容器,。
一个简单有效的解决方案 是使网格项目成为弹性容器。然后你可以将 flex 属性应用到 children,这可以让它们消耗免费 space.
.companyInfoContainer {
display: flex;
flex-direction: column;
}
.companyInfoBox {
flex: 1;
}
.contactInfoContainer {
display: flex;
flex-direction: column;
}
.contactInfoBox {
flex: 1
}
更多详情:
我想弄清楚如何让我的网格的两列具有相同的高度。这就是我所追求的:
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 上相同的 link。
.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%,但后来它不考虑网格间隙并且下降得太远了。
如何让左边成为行高?
使用 display
属性 flex
和项目高度 auto
例如
.flex-container {
display: flex;
width: 400px;
height: auto;
}
.flex-item {
background: red;
width: 100px;
height: auto;
margin: 10px;
}
如果网格不变,您可以手动设置相同的大小(您不会动态插入新元素或更改现有元素的垂直大小)
.companyInfoBox {
padding: 20px;
border: 1px solid #666;
height: 265px;
}
它简单有效(考虑到上面列出的限制): pen
那些网格项目已经是相同的高度。它们都是第二行的高度,即 1fr
,由网格容器上的 grid-template-rows
定义。
如果您在这两项 (.companyInfoContainer
& .contactInfoContainer
) 周围加上边框,您就会明白我的意思了。
您似乎希望网格项(.companyInfoBox
和 .contactInfoBox
)的边框 children 占据所有可用高度。
由于网格项不是网格容器,
一个简单有效的解决方案 是使网格项目成为弹性容器。然后你可以将 flex 属性应用到 children,这可以让它们消耗免费 space.
.companyInfoContainer {
display: flex;
flex-direction: column;
}
.companyInfoBox {
flex: 1;
}
.contactInfoContainer {
display: flex;
flex-direction: column;
}
.contactInfoBox {
flex: 1
}
更多详情: