CSS具有每个网格元素不同的高度

Question

我有一个包含三列的网格，并且高度发生变化以适合所有文本。

.main .contentWrapper {
    height:60%;
    margin-top:5%;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-gap:10px;
    /*grid-template-rows: auto;*/
    height:auto;
}

.main .contentWrapper .box .boxText {
    padding:15px;
    height:25%;
    text-align:center;
    margin:0;
}

img {
    object-fit:cover;
    width:100%;
    height:400px;
    margin:0;
}

如何使每个框调整大小以适合其自己的文本，并且它们的高度不相同？ 因为它是前两列的大小调整为适合第三列中最大的文本。

Answer 1

网格容器的 align-items属性的默认值是stretch ，这意味着每个网格项目都将扩展到网格行的高度（如果未使用grid-template-rows设置高度，则扩展到该行中的最大项目）。

要更改此设置，您只需添加align-items: flex-start到网格容器 （ .contentWrapper ）-请参见下面的演示：

 body { background: #ddd; } .contentWrapper { height: 60%; margin-top: 5%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; /*grid-template-rows: auto;*/ height: auto; align-items: flex-start; /* ADDED */ } .contentWrapper .box .boxText { padding: 15px; height: 25%; text-align: center; margin: 0; } .box { background: #fff; } img { object-fit: cover; width: 100%; height: 400px; margin: 0; } 

 <div class="contentWrapper"> <div class="box"> <img src="https://via.placeholder.com/400" /> <div class="boxText">Some text here</div> </div> <div class="box"> <img src="https://via.placeholder.com/400" /> <div class="boxText">Some text here Some text here Some text here </div> </div> <div class="box"> <img src="https://via.placeholder.com/400" /> <div class="boxText">Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here </div> </div> </div> 

Answer 2

我解决此问题的方法是在每个.contentWrapper .box添加margin-bottom: auto 。 这将文本推向图像，并使每个单元格适合其内容。

 .main .contentWrapper { height: 60%; margin-top: 5%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; /*grid-template-rows: auto;*/ height: auto; } .main .contentWrapper .box { background-color: #eee; margin-bottom: auto; } .main .contentWrapper .box .boxText { padding: 15px; height: 25%; text-align: center; margin: 0; } img { object-fit: cover; width: 100%; height: 400px; margin: 0; } 

 <div class="main"> <div class="contentWrapper"> <div class="box"> <img src="http://placekitten.com/200/200" alt=""> <div class="boxText">text text text text</div> </div> <div class="box"> <img src="http://placekitten.com/200/200" alt=""> <div class="boxText">text text text texttext text text texttext text text texttext text text text</div> </div> <div class="box"> <img src="http://placekitten.com/200/200" alt=""> <div class="boxText">text text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text text</div> </div> </div> </div> 

的jsfiddle