将行高设置为适合CSS网格中该行的最高单元格

Question

我有一个5列4行的网格。我希望每行的每个单元格的高度都相同。换句话说，每行高度应等于该行的最高单元格。

不幸的是我只能得到相同高度的全部细胞。我得到结果的唯一方法是flex并设置为DIV style =“ order：{order number}”但是这种方法并不好，因为它无法进行响应式网页设计并使使用php渲染页面变得复杂。

所以，由于响应式网页设计，我无法更改HTML DIV元素的顺序。

在CSS中的任何帮助将不胜感激。谢谢

body {
    background-color: #ededed;  
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #c2b9b4;
    text-align: center;
}

.grid-container {
  margin:auto;
  width:990px;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* or simply "1fr 1fr;" */
  grid-template-rows: 1fr;
  grid-row-gap: 0px; 
  grid-column-gap: 5px;
}

.object {background:white;border:2px #d6d6d5 solid;}
.object:hover {border:2px green solid;}


.object:hover .product_name {background:#001973}
.potencia {background:white;color:#000;text-align:center;line-height:200%;
        border-bottom:1px #d6d6d5 solid;
        
		height:auto;
    }

.potencia strong:before {content: "\f00c";font-family: FontAwesome;color:#059f47;font-size:18px}
.potencia span:before {content: "\f00d";font-family: FontAwesome;font-size:18px;color:#1e88d4;}

<div class="grid-container">
<div class="object top_object">
	<div style="background:#e5f5e5;" class="potencia">Display</div>
	<div style="background:#f5f4f4;" class="potencia">Luminosità immagine</div>
	<div class="potencia">Le pile/batterie sono incluse?</div>
	<div style="background:#f5f4f4;" class="potencia">Max. risoluzione schermo</div>
</div>

<div class="object object1">
	<div class="potencia">LCD</div>
	<div style="background:#f5f4f4;"class="potencia">1200</div>
	<div style="background:#f5f4f4;"class="potencia"><span></span></div>
	<div class="potencia">1920_x_1080</div>
</div>

<div class="object object2">
	<div class="potencia">LCD</div>
	<div style="background:#f5f4f4;"class="potencia">2800</div>
	<div style="background:#f5f4f4;"class="potencia"><span></span></div>
	<div class="potencia">I'm the highest cell in this row, but left and right cells are smaller.</div>
</div>

<div class="object object3">
	<div class="potencia">LED, LCD</div>
	<div style="background:#f5f4f4;"class="potencia">3500 lm</div>
	<div style="background:#f5f4f4;"class="potencia"><span></span></div>
	<div class="potencia">1080p Full HD</div>
</div>

<div class="object object4">
	<div class="potencia">LED</div>
	<div style="background:#f5f4f4;"class="potencia">2800</div>
	<div style="background:#f5f4f4;"class="potencia"><span></span></div>
	<div class="potencia">1920_x_1080</div>
</div>
</div>    

Answer 1

我不太了解您的问题。如果只希望最后一个单元格是其余可用高度，则可以使用flex。

或者您是否希望每个单元格的高度都与其中包含文本I'm the highest cell in this row, but left and right cells are smaller.的单元格相同？

body {
    background-color: #ededed;  
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #c2b9b4;
    text-align: center;
}

.grid-container {
  margin:auto;
  width:990px;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* or simply "1fr 1fr;" */
  grid-template-rows: 1fr;
  grid-row-gap: 0px; 
  grid-column-gap: 5px;
}

.object {background:white;border:2px #d6d6d5 solid;}
.object:hover {border:2px green solid;}

.object {
    display: flex;
    flex-direction: column;
}

.potencia:last-child {
    flex: 1;
}

.object:hover .product_name {background:#001973}
.potencia {background:white;color:#000;text-align:center;line-height:200%;
        border-bottom:1px #d6d6d5 solid;
        
		height:auto;
    }

.potencia strong:before {content: "\f00c";font-family: FontAwesome;color:#059f47;font-size:18px}
.potencia span:before {content: "\f00d";font-family: FontAwesome;font-size:18px;color:#1e88d4;}

<div class="grid-container">
<div class="object top_object">
	<div style="background:#e5f5e5;" class="potencia">Display</div>
	<div style="background:#f5f4f4;" class="potencia">Luminosità immagine</div>
	<div class="potencia">Le pile/batterie sono incluse?</div>
	<div style="background:#f5f4f4;" class="potencia">Max. risoluzione schermo</div>
</div>

<div class="object object1">
	<div class="potencia">LCD</div>
	<div style="background:#f5f4f4;"class="potencia">1200</div>
	<div style="background:#f5f4f4;"class="potencia"><span></span></div>
	<div class="potencia">1920_x_1080</div>
</div>

<div class="object object2">
	<div class="potencia">LCD</div>
	<div style="background:#f5f4f4;"class="potencia">2800</div>
	<div style="background:#f5f4f4;"class="potencia"><span></span></div>
	<div class="potencia">I'm the highest cell in this row, but left and right cells are smaller.</div>
</div>

<div class="object object3">
	<div class="potencia">LED, LCD</div>
	<div style="background:#f5f4f4;"class="potencia">3500 lm</div>
	<div style="background:#f5f4f4;"class="potencia"><span></span></div>
	<div class="potencia">1080p Full HD</div>
</div>

<div class="object object4">
	<div class="potencia">LED</div>
	<div style="background:#f5f4f4;"class="potencia">2800</div>
	<div style="background:#f5f4f4;"class="potencia"><span></span></div>
	<div class="potencia">1920_x_1080</div>
</div>
</div>