Set row height to fit highest cell in the row in CSS Grid

Question

I have a grid with 5 columns and 4 rows. I'd like to have height of each cell the same in each row. Another words each row height should be equal to highest cell in that row.

Unfortunately I can get only total cells the same height. The only approach I've got the result was flex and set in DIV style="order:{order number}" but that aproach is not good because its impossible to make responsive web design and complicate to render page with php.

So, I can't change order of HTML DIV elements due to responsive web design.

Any help in CSS would be appreciated. Thank you

 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

I dont quite understand your problem. If you just want that the last cell is the rest of the available height you could use flex.

Or do you want that every cell has the same height as the one with the text I'm the highest cell in this row, but left and right cells are smaller. in it?

 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; height:320px; 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;} .potencia { height: 25%; } .object:hover .product_name {background:#001973} .potencia {background:white;color:#000;text-align:center;line-height:200%; border-bottom:1px #d6d6d5 solid; } .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>