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