如何使 CSS 网格项目像 Flexbox 项目一样匹配父级的高度

问题描述 投票:0回答:1

我有这个简单的设置:

<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 高度:

如何让它只拉伸到父母的高度。类似于弹性盒:

html css css-grid
1个回答
0
投票

您可以在模板中定义行高:

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>

© www.soinside.com 2019 - 2024. All rights reserved.