我有这个简单的设置:
<div class="grid-container">
<div class="grid-child-1">
<div class="content">
some long text<br/> here in the child number<br/> 2 some long text<br/> here in the child number 2 some<br/>
long text here<br/> in the child number some long<br/> text here in the child number 2 some long<br/>
text here in the<br/> child number 2 some long<br/> text here in the child number<br/> 2 ывавыа ваss<br/>
text here in the<br/> child number 2 some long<br/> text here in the child number<br/> 2 ывавыа ваss<br/>
</div>
</div>
<div class="grid-child-2">some text</div>
</div>
及款式:
</style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid;
width: 100%;
height: 200px;
}
</style>
通过此设置,
grid-child-1
项目会超出父级的 200px 高度:
如何让它只拉伸到父母的高度。类似于弹性盒:
您可以在模板中定义行高:
grid-template: 100% / 1fr 1fr;
代替 grid-template-columns: 1fr 1fr;
.grid-container {
display: grid;
grid-template: 100% / 1fr 1fr;
border: 1px solid;
width: 100%;
height: 200px;
}
.grid-child-1 {
background-color: red;
}
<div class="grid-container">
<div class="grid-child-1">
<div class="content">
some long text<br/> here in the child number<br/> 2 some long text<br/> here in the child number 2 some<br/>
long text here<br/> in the child number some long<br/> text here in the child number 2 some long<br/>
text here in the<br/> child number 2 some long<br/> text here in the child number<br/> 2 ывавыа ваss<br/>
text here in the<br/> child number 2 some long<br/> text here in the child number<br/> 2 ывавыа ваss<br/>
</div>
</div>
<div class="grid-child-2">TEST</div>
</div>