For any element this works perfectly height: clamp(100px, 2.5vw, 150px) which sets a minimum,a growing rate and a maximum height.
How could we implement the clamp(MIN, VAL, MAX) css function to a row height ?
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>Do you mean like this? Setting box to 100% height and then just using the clamp property in 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>