Para cualquier elemento funciona perfectamente height: clamp(100px, 2.5vw, 150px) que establece un mínimo, una tasa de crecimiento y una altura máxima. ¿Cómo podríamos implementar la función css de clamp(MIN, VAL, MAX) a una altura de fila?
body { background: whitesmoke; border: solid black 1px; display: grid; grid-template-columns: auto auto auto; grid-template-rows: 125px; gap: 10px; padding: 10px; } .box { background-color: tomato; } <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div class="box"></div> <div class="box"></div> <div class="box"></div> </body> </html>Quieres decir así? Configurando el cuadro al 100% de altura y luego simplemente usando la propiedad de abrazadera en grid-template-rows.
body { background: whitesmoke; border: solid black 1px; display: grid; grid-template-columns: auto auto auto; grid-template-rows: clamp(300px, 3vh, 800px); gap: 10px; padding: 10px; } .box { background-color: tomato; height: 100%; } <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div class="box"></div> <div class="box"></div> <div class="box"></div> </body> </html>