css grid row height bound to view width-CodePudding

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 ></div>
<div ></div>
<div ></div>

</body>

</html>

CodePudding user response：

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 ></div>
  <div ></div>
  <div ></div>

</body>

</html>